From e03b60fdffe5ad9f179928fd090a489dbbee2c29 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Fri, 19 Jan 2024 09:52:48 +0800
Subject: [PATCH] 表格展示
---
src/views/place/components/baseAllInfo.vue | 431 +++++++++++++++++++++++++++++++++--------------------
1 files changed, 267 insertions(+), 164 deletions(-)
diff --git a/src/views/place/components/baseAllInfo.vue b/src/views/place/components/baseAllInfo.vue
index 06842f8..72ae16c 100644
--- a/src/views/place/components/baseAllInfo.vue
+++ b/src/views/place/components/baseAllInfo.vue
@@ -1,26 +1,35 @@
<template>
- <div class="cur-container-box">
- <div class="content-box">
- <box-title class="m10" :classVal="9" :title="'基本信息'"></box-title>
- <avue-form ref="baseForm" :option="option" v-model="form"></avue-form>
+ <el-dialog class="place-info-box" title="场所维护" append-to-body :visible.sync="roleBox" center @close="roleBoxClose">
- <box-title class="m10" :classVal="9" :title="'其他信息'"></box-title>
- <avue-form ref="restForm" :option="optionDetail" v-model="placeForm"></avue-form>
+ <div class="cur-container-box" v-if="roleBox">
- <box-title class="m10" :classVal="9" :title="'从业人员'"></box-title>
- <avue-crud :option="placeOption" :table-loading="loading" :data="placeExt" ref="crud" v-model="houseHoldForm"
- :permission="permissionList" @row-del="houseHoldRowDel" @row-update="houseHoldRowUpdate"
- @row-save="houseHoldRowSave" :page.sync="holdPage" @current-change="holdCurrentChange"
- @size-change="holdSizeChange" @refresh-change="refreshHoldChange" @on-load="holdOnLoad">
- </avue-crud>
+ <div class="content-box">
+
+ <box-title class="m10" :classVal="9" :title="'基本信息'"></box-title>
+ <avue-form ref="baseForm" :option="option" v-model="form" :key="reload"></avue-form>
+
+ <box-title class="m10" :classVal="9" :title="'其他信息'"></box-title>
+ <avue-form ref="restForm" :option="optionDetail" v-model="placeForm"></avue-form>
+
+ <box-title class="m10" :classVal="9" :title="'从业人员'"></box-title>
+ <avue-crud :option="placeOption" :table-loading="loading" :data="placeExt" ref="crud"
+ v-model="houseHoldForm" :permission="permissionList" @row-del="houseHoldRowDel"
+ @row-update="houseHoldRowUpdate" @row-save="houseHoldRowSave" :page.sync="holdPage"
+ @current-change="holdCurrentChange" @size-change="holdSizeChange" @refresh-change="refreshHoldChange"
+ @on-load="holdOnLoad">
+ </avue-crud>
+
+ </div>
+
+ <div class="footer-btn-box">
+ <el-button size="small" type="primary" @click="dataUpdate">保 存</el-button>
+
+ <el-button size="small" @click="roleBoxClose">关 闭</el-button>
+ </div>
+
</div>
- <div class="footer-btn-box">
- <el-button size="small" type="primary" @click="dataUpdate">保 存</el-button>
-
- <el-button size="small" @click="closeRowDetails">关 闭</el-button>
- </div>
- </div>
+ </el-dialog>
</template>
<script>
@@ -43,7 +52,23 @@
export default {
data () {
+
+ //手机号格式校验
+ let validatorPhone = function (rule, value, callback) {
+ if (value) {
+ if (!/^1[3456789]\d{9}$/.test(value)) {
+ callback(new Error('手机号格式有误！'))
+ } else {
+ callback()
+ }
+ }
+ callback()
+ }
+
return {
+ reload: Math.random(),
+ roleBox: false,
+
placeExt: [],
form: {},
@@ -63,38 +88,24 @@
}],
},
+
{
- span: 7,
- label: "场所标签",
- prop: "label",
- type: "cascader",
- dicUrl: "/api/blade-category/category/getCategory?level=2",
- cascader: ["smallLabel"],
- props: {
- label: "categoryName",
- value: "categoryNo"
- },
+ width: 160,
+ overHidden: true,
+ slot: true,
+ label: "地址",
+ prop: "location",
+ type: 'map',
dataType: "string",
- hide: true,
- rules: [{
- required: true,
- message: "请输入场所标签",
- trigger: "blur",
- },],
- },
- {
- span: 5,
- label: "",
- labelWidth: 20,
- prop: "smallLabel",
- type: "cascader",
- dicUrl: "/api/blade-category/category/getCategory?parentNo={{label}}",
- props: {
- label: "categoryName",
- value: "categoryNo"
- },
- dataType: "string",
- hide: true,
+ span: 12,
+ value: [117.966460, 28.431002, ""],
+ rules: [
+ {
+ required: true,
+ message: "请选择地址",
+ trigger: "blur",
+ },
+ ],
},
{
@@ -108,12 +119,19 @@
},
{
- width: 110,
- label: "电话",
+ width: 96,
+ label: "手机号码",
prop: "principalPhone",
search: true,
searchSpan: 4,
slot: true,
+ overHidden: true,
+ rules: [
+ {
+ validator: validatorPhone,
+ trigger: 'blur'
+ }
+ ],
},
{
@@ -122,8 +140,8 @@
label: "所属社区",
prop: "neiCode",
search: false,
- width: 150,
type: "tree",
+ dataType: 'string',
dicUrl: "/api/blade-system/region/tree",
props: {
label: "name",
@@ -148,6 +166,7 @@
label: "gridName",
value: "id",
},
+ dataType: 'string',
dicUrl:
"/api/blade-grid/grid/getGridList?communityCode={{neiCode}}",
rules: [
@@ -157,6 +176,65 @@
trigger: "blur",
},
],
+ },
+
+
+ {
+ span: 7,
+ label: "场所标签",
+ prop: "label",
+ type: "select",
+ dicUrl: "/api/blade-category/category/getCategory?level=2",
+ cascader: ["smallLabel"],
+ props: {
+ label: "categoryName",
+ value: "categoryNo"
+ },
+ dataType: "string",
+ hide: true,
+ rules: [{
+ required: true,
+ message: "请输入场所标签",
+ trigger: "blur",
+ },],
+ },
+ {
+ span: 5,
+ label: "",
+ labelWidth: 20,
+ prop: "smallLabel",
+ type: "select",
+ dicUrl: "/api/blade-category/category/getCategory?parentNo={{label}}",
+ props: {
+ label: "categoryName",
+ value: "categoryNo"
+ },
+ dataType: "string",
+ hide: true,
+ },
+
+ {
+ span: 12,
+ label: "标签颜色",
+ prop: "color",
+ type: "select",
+ dicData: [
+ {
+ label: '绿',
+ value: 'green'
+ }, {
+ label: '黄',
+ value: 'yellow'
+ }, {
+ label: '红',
+ value: 'red'
+ }
+ ],
+ props: {
+ label: "label",
+ value: "value"
+ },
+ hide: true,
},
{
@@ -175,25 +253,6 @@
},
span: 24,
},
-
- {
- width: 160,
- overHidden: true,
- slot: true,
- label: "位置",
- prop: "location",
- type: 'map',
- dataType: "string",
- span: 24,
- value: [117.966460, 28.431002, ""],
- rules: [
- {
- required: true,
- message: "请选择位置",
- trigger: "blur",
- },
- ],
- },
]
},
@@ -206,9 +265,21 @@
label: '法人信息',
prop: 'legalPerson'
},
+
{
- label: '法人电话',
- prop: 'legalTel'
+ width: 96,
+ label: "法人电话",
+ prop: "legalTel",
+ search: true,
+ searchSpan: 4,
+ slot: true,
+ overHidden: true,
+ rules: [
+ {
+ validator: validatorPhone,
+ trigger: 'blur'
+ }
+ ],
},
{
@@ -262,22 +333,36 @@
border: true,
index: true,
dialogClickModal: false,
- column: [{
- label: "名称",
- prop: "name",
- searchSpan: 4,
- search: true,
- }, {
- label: "电话",
- prop: "telephone",
- searchSpan: 4,
- search: true,
- }, {
- label: "暂住地",
- prop: "tempAddress",
- searchSpan: 4,
- search: true,
- },]
+ column: [
+ {
+ label: "名称",
+ prop: "name",
+ searchSpan: 4,
+ search: true,
+ },
+
+ {
+ width: 96,
+ label: "手机号码",
+ prop: "telephone",
+ search: true,
+ searchSpan: 4,
+ slot: true,
+ overHidden: true,
+ rules: [
+ {
+ validator: validatorPhone,
+ trigger: 'blur'
+ }
+ ],
+ },
+
+ {
+ label: "暂住地",
+ prop: "tempAddress",
+ searchSpan: 4,
+ search: true,
+ },]
},
holdPage: {
pageSize: 20,
@@ -285,6 +370,7 @@
total: 0,
},
houseHoldForm: {},
+
}
},
@@ -292,69 +378,64 @@
inject: ["placeElement"],
- watch: {
- 'placeElement.curRow': {
- handler (newData) {
- const that = this
- if (newData && 'id' in newData && newData['id'] != null && newData['id'] != '') {
-
- that.$axios.all([
- getPlace(newData['id']),
- getPlaceExt({ placeId: newData['id'] }),
- ]).then(that.$axios.spread(function (baseInfo, restInfo) {
- that.form = baseInfo.data.data
-
- that.form.location = [that.form.lng, that.form.lat, that.form.location].join(',')
-
- if (that.form.imageUrls && that.form.imageUrls.length) {
- that.form.imageUrls = that.form.imageUrls.split(",").filter(item => item != '').map(item => website.minioUrl + item).join(',')
- }
-
- if (that.form.placePoiLabelVOList && that.form.placePoiLabelVOList.length) {
- let lebelTwo = that.form.placePoiLabelVOList.find(item => {
- return item.type == 2
- })
-
- if (lebelTwo) that.form.label = String(lebelTwo.poiCode)
-
- let lebelThree = that.form.placePoiLabelVOList.find(item => {
- return item.type == 3
- })
-
- if (lebelThree) that.form.smallLabel = String(lebelThree.poiCode)
- }
-
- const data = restInfo.data.data
-
- if (data) {
- let imageUrls = data.imageUrls
- let planImageUrls = data.planImageUrls
-
- if (imageUrls && imageUrls.length) {
- imageUrls = imageUrls.split(',').filter(item => item != '').map(item => website.minioUrl + item).join(",")
- }
-
- if (planImageUrls && planImageUrls.length) {
- planImageUrls = planImageUrls.split(',').filter(item => item != '').map(item => website.minioUrl + item).join(",")
- }
-
- that.placeForm = {
- ...data,
- imageUrls,
- planImageUrls
- }
- }
-
- }))
-
- that.holdOnLoad(this.holdPage)
- }
- },
- immediate: true
- }
- },
+ watch: {},
methods: {
+ initOpen (newData) {
+ this.curRow = newData
+ this.roleBox = true
+
+ const that = this
+
+ that.$axios.all([
+ getPlace(newData['id']),
+ getPlaceExt({ placeId: newData['id'] }),
+ ]).then(that.$axios.spread(function (baseInfo, restInfo) {
+ that.form = baseInfo.data.data
+
+ that.form.location = [that.form.lng, that.form.lat, that.form.location].join(',')
+
+ if (that.form.imageUrls && that.form.imageUrls.length) {
+ that.form.imageUrls = that.form.imageUrls.split(",").filter(item => item != '').map(item => website.minioUrl + item).join(',')
+ }
+
+ if (that.form.placePoiLabelVOList && that.form.placePoiLabelVOList.length) {
+ let lebelTwo = that.form.placePoiLabelVOList.find(item => {
+ return item.type == 2
+ })
+
+ if (lebelTwo) that.form.label = String(lebelTwo.poiCode)
+
+ let lebelThree = that.form.placePoiLabelVOList.find(item => {
+ return item.type == 3
+ })
+
+ if (lebelThree) that.form.smallLabel = String(lebelThree.poiCode)
+ }
+
+ const data = restInfo.data.data
+
+ if (data) {
+ let imageUrls = data.imageUrls
+ let planImageUrls = data.planImageUrls
+
+ if (imageUrls && imageUrls.length) {
+ imageUrls = imageUrls.split(',').filter(item => item != '').map(item => website.minioUrl + item).join(",")
+ }
+
+ if (planImageUrls && planImageUrls.length) {
+ planImageUrls = planImageUrls.split(',').filter(item => item != '').map(item => website.minioUrl + item).join(",")
+ }
+
+ that.placeForm = {
+ ...data,
+ imageUrls,
+ planImageUrls
+ }
+ }
+ }))
+ },
+
locationDispose (data) {
data = data.split(',')
@@ -410,7 +491,7 @@
houseHoldRowSave (row, done, loading) {
holdAdd({
...row,
- placeId: this.placeElement.curRow.id
+ placeId: this.curRow.id
}).then(
() => {
this.holdOnLoad(this.holdPage)
@@ -433,11 +514,13 @@
},
holdOnLoad (holdPage, params = {}) {
- if (!this.placeElement.curRow.id) return
+ console.log(98098599)
+
+ if (!this.curRow.id) return
let values = {
...params,
- placeId: this.placeElement.curRow.id
+ placeId: this.curRow.id
}
getHoldList(holdPage.currentPage, holdPage.pageSize, values).then((res) => {
@@ -459,26 +542,36 @@
this.holdPage.pageSize = pageSize
},
- dataUpdate () {
- const that = this
-
- let imageUrls = this.form.imageUrls
-
- if (imageUrls.length > 0) {
+ desposeImage (data) {
+ if (data.length > 0) {
var urls = []
- var split = imageUrls.split(",").filter(item => item != '')
+ var split = data.split(",").filter(item => item != '')
split.forEach(url => {
var names = url.split("jczz/")
urls.push(names[1])
})
- imageUrls = urls.join(",")
+ data = urls.join(",")
}
+
+ return data
+ },
+
+ dataUpdate () {
+ const that = this
+
+ let imageUrls = this.desposeImage(this.form.imageUrls)
+ let placeImages = this.desposeImage(this.placeForm.imageUrls)
+ let placePlanImageUrls = this.desposeImage(this.placeForm.planImageUrls)
+
let label = this.form.label
if (this.form.smallLabel != '') {
label = label + ',' + this.form.smallLabel
}
+
+ console.log(this.form, this.placeForm, 5555)
+
delete this.form.smallLabel
@@ -492,14 +585,18 @@
label,
...this.locationDispose(this.form.location)
}),
- updatePlaceExt(this.placeForm)
+ updatePlaceExt({
+ ...this.placeForm,
+ imageUrls: placeImages,
+ planImageUrls: placePlanImageUrls
+ })
]).then(that.$axios.spread(function () {
that.$message({
type: "success",
message: "操作成功!",
})
- that.closeRowDetails()
+ that.roleBoxClose()
that.placeElement.onLoad(that.placeElement.page, that.placeElement.query)
@@ -512,8 +609,14 @@
})
},
- closeRowDetails () {
- this.placeElement.roleBox = false
+ roleBoxClose () {
+ this.form = {}
+ this.placeForm = {}
+
+ this.$refs.baseForm && this.$refs.baseForm.resetForm()
+ this.$refs.restForm && this.$refs.restForm.resetForm()
+
+ this.roleBox = false
}
},
}
--
Gitblit v1.9.3