From e2fdfe540eaf160dc7d063c60667041edcc64e86 Mon Sep 17 00:00:00 2001 From: gaoshp <291585735@qq.com> Date: 星期二, 05 十一月 2024 22:55:14 +0800 Subject: [PATCH] 处理显示名称 --- src/views/console/workstation/CollDialog.vue | 160 +++++++++++++++++++++++++++++++++++++++++++---------- 1 files changed, 130 insertions(+), 30 deletions(-) diff --git a/src/views/console/workstation/CollDialog.vue b/src/views/console/workstation/CollDialog.vue index e62bc6f..e7e979d 100644 --- a/src/views/console/workstation/CollDialog.vue +++ b/src/views/console/workstation/CollDialog.vue @@ -1,33 +1,17 @@ <template> - <el-dialog title="鏁版嵁鐐�" v-model="visible" :width="'80%'" destroy-on-close @closed="$emit('closed')"> - <p style="margin-bottom: 14px;"> + <el-dialog title="鏁版嵁鐐�" v-model="visible" :width="'100%'" 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> - </template> - <template #default="scope"> - <el-select v-model="scope.row[item.prop]" placeholder="Select" 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-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="200"> + <el-table-column label="鎿嶄綔" prop="state" width="200" fixed="left"> <template #default="scope"> <el-button-group> <el-button text type="primary" size="small" @click="table_edit(scope.row)">缂栬緫</el-button> @@ -41,6 +25,34 @@ </template> </el-table-column> + <el-table-column width="200" 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 :disabled="!scope.row.status || (item.disabledFn && item.disabledFn(scope.row))" + v-model="scope.row[item.prop]" @change="change($event, scope.row, scope.$index, item)" + placeholder="" size="small" v-if="item.type === 'option'"> + <el-option v-for="item in item.options" :key="item.value || item" :label="(item?.label || item)" + :value="(item.value || item)" /> + </el-select> + <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" + :disabled="(['dpLabel', 'dpName'].includes(item.prop) && 'Other' !== scope.row.dpCategory)"></el-input> + <span v-else>{{ scope.row[item.prop] }}</span> + </template> + </el-table-column> + + </scFormTable> <template #footer> <el-button @click="visible = false">鍙� 娑�</el-button> @@ -50,8 +62,11 @@ </template> <script> +import addOptions from './addOptions' export default { + name: 'CollDialog', emits: ['success', 'closed'], + mixins: [addOptions], props: { option: { type: Object @@ -72,14 +87,27 @@ status: '2' // 涓嶅瓨鍦ㄥ凡淇濆瓨 1: 姝e湪缂栬緫 2: 鏂板 }, type: '', - typeList: [] - + typeList: [], + appId: '' } }, created() { }, methods: { + change(e, row, index, { prop, options }) { + console.log(e, options) + if (prop === 'dpCategory' && e !== 'Other') { + const label = options.find(v => v.value === e).label + this.tabledata[index].dpLabel = label + this.tabledata[index].dpName = e + this.tabledata[index].paramChartType = 'distribute' + } else if (prop === 'dpCategory' && e === 'Other') { + this.tabledata[index].dpLabel = '' + this.tabledata[index].dpName = '' + } + // 鐐逛綅鍒嗙被涓洪潪鍏朵粬鏃� 杩囩▼鍙傛暟灞曠ず鏂瑰紡涓哄垎甯冨浘 + }, changeType(val) { if (this.tabledata.length > 0) { this.$confirm(`鍒囨崲绫诲瀷灏嗗垹闄ゆ墍鏈夊凡閰嶇疆鏁版嵁鐐筦, '鎻愮ず', { @@ -87,6 +115,7 @@ }).then(() => { try { this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull) + this.addOptions(this.cols) this.tabledata = [] } catch (error) { this.cols = [] @@ -97,12 +126,24 @@ } else { try { this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull) + this.addOptions(this.cols) + } 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) { @@ -125,11 +166,64 @@ }) }, + // addOptions() { + // if (this.cols.filter(v => v.prop === 'isProcessParam').length === 0) { + // this.cols.unshift( + // { + // label: "杩囩▼鍙傛暟", + // prop: "isProcessParam", + // isRequired: true, + // type: 'boolean', + // } + // ) + // } + // if (this.cols.filter(v => v.prop === 'dpLabel').length === 0) { + // this.cols.unshift( + // { + // label: "鏄剧ず鍚嶇О", + // prop: "dpLabel", + // isRequired: true, + // } + // ) + // } + // if (this.cols.filter(v => v.prop === 'dpCategory').length === 0) { + // this.cols.unshift( + // { + // label: "鐐逛綅鍒嗙被", + // prop: "dpCategory", + // isRequired: true, + // type: 'option', + // options: [{ + // label: '绋嬪簭鍚�', + // value: 'ProgName' + // }, { + // label: '绋嬪簭鍐呭', + // value: 'ProgContent' + // }, { + // label: '鍒�鍏峰彿', + // value: 'ToolNo' + // }, { + // label: '鐘舵��', + // value: 'DeviceStatus' + // }, { + // label: '浜ч噺', + // value: 'Output' + // }, { + // label: '鍛婅', + // value: 'Alarm' + // }, { + // label: '鍏朵粬', + // value: 'Other' + // }] + // } + // ) + // } + // }, getList(params) { - this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => { + this.$HTTP.get(`/api/smis/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => { try { this.cols = JSON.parse(res.data.dpHead) - console.log(this.cols, 'cols') + this.addOptions(this.cols) } catch (error) { this.cols = [] } @@ -142,11 +236,13 @@ this.tabledata = [] } this.type = res.data.type - + this.appId = res.data.appId + this.setAddTemp() // return res }) }, table_edit(row) { + console.log('bianji', row) row.status = '1' }, del(index) { @@ -170,22 +266,26 @@ if (len != this.tabledata.length) { return this.$message.warning('鏁版嵁鐐瑰悕绉颁笉鑳介噸澶�') } - this.$HTTP.put('/api/blade-cps/workstation/saveDatapoints', { + this.$HTTP.put('/api/smis/workstation/saveDatapoints', { 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, }) + this.visible = false + this.$emit('success') + } else { + this.$message.error(res.msg) } }).finally(() => { - this.visible = false - this.$emit('success') + }) }, -- Gitblit v1.9.3