From eef1ef0be935d4a3d8fc691b2666f41796b2d4a5 Mon Sep 17 00:00:00 2001
From: gaoshp <291585735@qq.com>
Date: 星期一, 04 十一月 2024 19:57:08 +0800
Subject: [PATCH] 增加列表显示
---
src/views/console/workstation/CollDialog.vue | 261 ++++++++++++++++++++++++++++++++++++++++++---------
1 files changed, 212 insertions(+), 49 deletions(-)
diff --git a/src/views/console/workstation/CollDialog.vue b/src/views/console/workstation/CollDialog.vue
index 4b038e4..e7e979d 100644
--- a/src/views/console/workstation/CollDialog.vue
+++ b/src/views/console/workstation/CollDialog.vue
@@ -1,30 +1,22 @@
<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>
+ <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 #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="120">
+ <el-table-column label="鎿嶄綔" prop="state" width="200" fixed="left">
<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>
@@ -33,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>
@@ -42,10 +62,11 @@
</template>
<script>
-import deepmerge from 'deepmerge'
-import http from "@/utils/request"
+import addOptions from './addOptions'
export default {
+ name: 'CollDialog',
emits: ['success', 'closed'],
+ mixins: [addOptions],
props: {
option: {
type: Object
@@ -66,22 +87,63 @@
status: '2' // 涓嶅瓨鍦ㄥ凡淇濆瓨 1: 姝ｅ湪缂栬緫 2: 鏂板
},
type: '',
- typeList: []
-
+ typeList: [],
+ appId: ''
}
},
created() {
},
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) {
-
+ 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(`鍒囨崲绫诲瀷灏嗗垹闄ゆ墍鏈夊凡閰嶇疆鏁版嵁鐐筦, '鎻愮ず', {
+ type: 'warning'
+ }).then(() => {
+ try {
+ this.cols = JSON.parse(this.typeList.find(v => v.id === val).dpHeadFull)
+ this.addOptions(this.cols)
+ this.tabledata = []
+ } catch (error) {
+ this.cols = []
+ }
+ }).catch(() => {
+
+ })
+ } 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) {
@@ -95,34 +157,135 @@
return this
},
getDetailList(params) {
-
-
this.$HTTP.get(`/api/smart-collect/tpl/typelist`, {}, { params }).then(res => {
this.typeList = res.data || [];
// return res
}).finally(() => {
- this.$HTTP.get(`/api/blade-cps/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
- // res.data.records = res?.data?.records.map(v => {
- // return {
- // ...v,
- // statusName: v.status ? '鍚敤' : '绂佺敤'
- // }
- // })
- this.type = res.data.type
- this.tabledata = res.data.dpConfig || [];
- // return res
- })
+ this.getList(params)
})
},
+ // 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/smis/workstation/listDatapointsByWorkstationId`, {}, { params }).then(res => {
+ try {
+ this.cols = JSON.parse(res.data.dpHead)
+ this.addOptions(this.cols)
+ } 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.appId = res.data.appId
+ this.setAddTemp()
+ // return res
+ })
+ },
+ table_edit(row) {
+ console.log('bianji', 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)
- this.$HTTP.put('/api/blade-cps/workstation/saveDatapoints', {
- dpConfig: JSON.stringify(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/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(() => {
+
})
},
--
Gitblit v1.9.3