From 9516d95bdcc481b71d4b090bbdcfff39a84b26d6 Mon Sep 17 00:00:00 2001 From: lzhe <lzhe@example.com> Date: 星期一, 07 十月 2024 22:38:23 +0800 Subject: [PATCH] 1 --- src/views/console/workstation/CollDialog.vue | 165 +++++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 135 insertions(+), 30 deletions(-) diff --git a/src/views/console/workstation/CollDialog.vue b/src/views/console/workstation/CollDialog.vue index ef32a4c..fda7f7b 100644 --- a/src/views/console/workstation/CollDialog.vue +++ b/src/views/console/workstation/CollDialog.vue @@ -1,30 +1,47 @@ <template> - <el-dialog title="鏁版嵁鐐�" v-model="visible" :width="'100%'" destroy-on-close @closed="$emit('closed')"> - <el-select v-model="type" placeholder="Select" size="small" style="width: 240px" @change="changeType"> - <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" /> - </el-select> + <el-dialog title="鏁版嵁鐐�" v-model="visible" :width="'80%'" destroy-on-close @closed="$emit('closed')"> + <p style="margin-bottom: 14px;display: flex;align-items: center;"> + <span style="margin-right: 8px;">绫诲瀷</span> + <el-select v-model="type" placeholder="绫诲瀷" size="small" style="width: 240px" @change="changeType"> + <el-option v-for="item in typeList" :key="item.id" :label="item.name" :value="item.id" /> + </el-select> + <span style="margin-right: 8px;margin-left: auto;">IOT搴旂敤ID</span> + <el-input v-model="appId" placeholder="IOT搴旂敤ID" style="width: 240px"></el-input> + </p> + <scFormTable v-show="type" ref="table1" v-model="tabledata" stripe hideDelete :hideAdd="!type" :addTemplate="addTemplate"> <el-table-column v-for="item in cols" :key="item.prop" :prop="item.prop" :label="item.label"> + <template #header="scope"> + <span v-show="item.isRequired" style="color: red;">*</span> + <span>{{ scope.column.label }}</span> + <el-tooltip class="box-item" effect="dark" placement="top-start"> + <template #content> + <p v-html="item.describe"></p> + </template> + <el-icon v-show="item.describe"><el-icon-question-filled /></el-icon> + </el-tooltip> + + </template> <template #default="scope"> - <el-select v-model="scope.row[item.prop]" placeholder="Select" size="small" + <el-select v-model="scope.row[item.prop]" placeholder="" size="small" v-if="scope.row.status && item.type === 'option'"> <el-option v-for="item in item.options" :key="item" :label="item" :value="item" /> </el-select> - <el-switch size="small" v-model="scope.row[item.prop]" - v-else-if="scope.row.status && item.type === 'boolean'" /> + <el-switch :disabled="!scope.row.status" size="small" v-model="scope.row[item.prop]" + v-else-if="item.type === 'boolean'" /> <el-input size="small" v-model="scope.row[item.prop]" placeholder="" v-else-if="scope.row.status"></el-input> <span v-else>{{ scope.row[item.prop] }}</span> </template> </el-table-column> - <el-table-column label="鎿嶄綔" prop="state" width="120"> + <el-table-column label="鎿嶄綔" prop="state" width="200"> <template #default="scope"> <el-button-group> - <el-button text type="primary" size="small">缂栬緫</el-button> - <el-button text type="primary">澶嶅埗</el-button> - <el-popconfirm width="220" title="纭畾灏嗛�夋嫨鐨勬暟鎹垹闄�" @confirm="del(scope.row)"> + <el-button text type="primary" size="small" @click="table_edit(scope.row)">缂栬緫</el-button> + <el-button text type="primary" size="small" @click="copy(scope.row)">澶嶅埗</el-button> + <el-popconfirm width="220" title="纭畾灏嗛�夋嫨鐨勬暟鎹垹闄�" @confirm="del(scope.$index)"> <template #reference> <el-button text type="primary" size="small">鍒犻櫎</el-button> </template> @@ -42,9 +59,8 @@ </template> <script> -import deepmerge from 'deepmerge' -import http from "@/utils/request" export default { + name: 'CollDialog', emits: ['success', 'closed'], props: { option: { @@ -66,8 +82,8 @@ status: '2' // 涓嶅瓨鍦ㄥ凡淇濆瓨 1: 姝e湪缂栬緫 2: 鏂板 }, type: '', - typeList: [] - + typeList: [], + appId: '' } }, created() { @@ -75,13 +91,57 @@ }, methods: { changeType(val) { - console.log(val) - console.log(JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)) - try { - this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull) - } catch (error) { + if (this.tabledata.length > 0) { + this.$confirm(`鍒囨崲绫诲瀷灏嗗垹闄ゆ墍鏈夊凡閰嶇疆鏁版嵁鐐筦, '鎻愮ず', { + type: 'warning' + }).then(() => { + try { + this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull) + if (this.cols.filter(v => v.prop === 'dplabel').length === 0) { + this.cols.unshift( + { + label: "鏄剧ず鍚嶇О", + prop: "dplabel", + isRequired: true, + } + ) + } + this.tabledata = [] + } catch (error) { + this.cols = [] + } + }).catch(() => { + }) + } else { + try { + this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull) + if (this.cols.filter(v => v.prop === 'dplabel').length === 0) { + this.cols.unshift( + { + label: "鏄剧ず鍚嶇О", + prop: "dplabel", + isRequired: true, + } + ) + } + + } catch (error) { + this.cols = [] + } } + console.log('default') + this.setAddTemp() + + }, + setAddTemp() { + this.cols.forEach(v => { + if (v.type === 'boolean') { + this.addTemplate[v.prop] = false + } + v.default && (this.addTemplate[v.prop] = v.default) + + }) }, //鏄剧ず open(mode = 'add', params) { @@ -106,30 +166,75 @@ }, getList(params) { this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => { - // res.data.records = res?.data?.records.map(v => { - // return { - // ...v, - // statusName: v.status ? '鍚敤' : '绂佺敤' - // } - // }) + try { + this.cols = JSON.parse(res.data.dpHead) + if (this.cols.filter(v => v.prop === 'dplabel').length === 0) { + this.cols.unshift( + { + label: "鏄剧ず鍚嶇О", + prop: "dplabel", + isRequired: true, + } + ) + } + } catch (error) { + this.cols = [] + } + try { + this.tabledata = JSON.parse(res.data.dpConfig).map(v => { + v.status = null + return v + }) || []; + } catch (error) { + this.tabledata = [] + } this.type = res.data.type - this.tabledata = res.data.dpConfig || []; + this.appId = res.data.appId + this.setAddTemp() // return res }) }, + table_edit(row) { + row.status = '1' + }, + del(index) { + this.tabledata.splice(index, 1) + }, + copy(row) { + this.tabledata.push(Object.assign({}, row, { status: '1' })) + }, //琛ㄥ崟鎻愪氦鏂规硶 submit() { - console.log(this.tabledata) + let isRequiredKey = this.cols.filter(v => v.isRequired).map(v => v.prop) + let flag = this.tabledata.every(item => { + return isRequiredKey.every(v => { + return item[v] !== undefined && item[v] !== null && item[v] !== '' + }) + }) + if (!flag) { + return this.$message.warning('璇锋牎楠屽繀濉」') + } + let len = [...new Set(this.tabledata.map(v => v.dpName))].length + if (len != this.tabledata.length) { + return this.$message.warning('鏁版嵁鐐瑰悕绉颁笉鑳介噸澶�') + } this.$HTTP.put('/api/blade-cps/workstation/saveDatapoints', { - dpConfig: JSON.stringify(this.tabledata), + dpConfig: JSON.stringify(this.tabledata.map(v => { + delete v.status + return v + })), workstationId: this.params.id, - type: this.type + type: this.type, + appId: this.appId }).then(res => { if (res.code === 200) { this.getList({ workstationId: this.params.id, }) } + }).finally(() => { + this.visible = false + this.$emit('success') }) }, -- Gitblit v1.9.3