[add] 查看配置

2022-05-18 17:20:58 +08:00
parent 1ce2d5aec4
commit aae12eb8d0
9 changed files with 489 additions and 48 deletions
@@ -34,6 +34,7 @@
        "vue": "^2.6.10",
        "vue-area-linkage": "^5.1.0",
        "vue-cropper": "^0.5.4",
+        "vue-draggable-resizable": "^2.1.0",
        "vue-i18n": "^8.26.8",
        "vue-loader": "^15.7.0",
        "vue-ls": "^3.2.0",
@@ -19415,6 +19416,15 @@
      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.5.6.tgz",
      "integrity": "sha512-54Z/AipXDBcE5nzJweTM+BryzSAcC0FCTMQLvLt6f4XanP4AWB3mPkQw3PG3NRICo7knljHO+N+pjZxYAKoTLQ=="
    },
+    "node_modules/vue-draggable-resizable": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue-draggable-resizable/-/vue-draggable-resizable-2.1.0.tgz",
+      "integrity": "sha512-DQe5JjiqPjndc3XZkkZAMVygMlJ4TLcpMWM78IkizHeJBfX5Ki6OKZPxrT+HE7w/12d+OfWom5Y5phYcrwCzqg==",
+      "engines": {
+        "node": ">= 4.0.0",
+        "npm": ">= 3.0.0"
+      }
+    },
    "node_modules/vue-eslint-parser": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
@@ -37285,6 +37295,11 @@
      "resolved": "https://registry.npmjs.org/vue-cropper/-/vue-cropper-0.5.6.tgz",
      "integrity": "sha512-54Z/AipXDBcE5nzJweTM+BryzSAcC0FCTMQLvLt6f4XanP4AWB3mPkQw3PG3NRICo7knljHO+N+pjZxYAKoTLQ=="
    },
+    "vue-draggable-resizable": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/vue-draggable-resizable/-/vue-draggable-resizable-2.1.0.tgz",
+      "integrity": "sha512-DQe5JjiqPjndc3XZkkZAMVygMlJ4TLcpMWM78IkizHeJBfX5Ki6OKZPxrT+HE7w/12d+OfWom5Y5phYcrwCzqg=="
+    },
    "vue-eslint-parser": {
      "version": "2.0.3",
      "resolved": "https://registry.npmjs.org/vue-eslint-parser/-/vue-eslint-parser-2.0.3.tgz",
@@ -36,6 +36,7 @@
    "vue": "^2.6.10",
    "vue-area-linkage": "^5.1.0",
    "vue-cropper": "^0.5.4",
+    "vue-draggable-resizable": "^2.1.0",
    "vue-i18n": "^8.26.8",
    "vue-loader": "^15.7.0",
    "vue-ls": "^3.2.0",
@@ -707,6 +707,7 @@ module.exports = {
  uploadTime: 'Upload time',
  enclosure: 'enclosure',
  // 认证
+  configurationInformation: 'configuration Information',
  modifyprojectInterfacePerson: 'modify project Interface Person',
  operatethisbutton: 'You do not have permission to operate this button',
  ParameterLibrary: 'Parameter Library',
@@ -717,6 +717,7 @@ module.exports = {
  uploadTime: '上传时间',
  enclosure: '附件',
  // 认证
+  configurationInformation: '配置信息',
  modifyprojectInterfacePerson: '修改工程接口人',
  operatethisbutton: '没有权限操作此按钮',
  ParameterLibrary: '参数库',
@@ -10,9 +10,13 @@
        :data-source="dataSource"
        :loading="loading"
        :columns="columns"
+        :components="components"
        @change="tableOnChange"
        @onHeaderRow='onHeaderRow'
      >
+        <span slot="titleName" slot-scope="text">
+          <span style='padding-right: 20px'>{{ text.sortOrder }} </span><a-button @click='onClickSee(text)'>查看</a-button>
+         </span>
         <span slot="operationbtn" slot-scope="record">
 <!--           待发起收集  1-->
 <!--           待工程接口人处理 2-->
@@ -54,20 +58,6 @@
           </span>
           </span>
         </span>
-        <span slot="operation" slot-scope="record">
-                     <a v-for="(ol,index) in OperationList"
-                        @click="OperationClick(ol,record)">
-                        <span v-if="ol.text == $t('CancelCollection')" v-has="ol.has" class="text">
-                                    {{!record.collectFlag || record.collectFlag == 0 ? $t('Collection') :$t('CancelCollection')}}
-                        </span>
-                        <span v-else-if="ol.text == $t('CancelSubscribe')" v-has="ol.has" class="text">
-                                    {{!record.subscribeFlag || record.subscribeFlag == 0 ? $t('subscribe') :$t('CancelSubscribe')}}
-                       </span>
-                        <span v-else v-has="ol.has" class="text">
-                               {{ol.text}}
-                        </span>
-                     </a>
-         </span>
        <span slot="detailClick" slot-scope="text,record">
          <collection-type :detailDate='text' />
        </span>
@@ -105,6 +95,40 @@
        </div>
      </div>
    </a-modal>
+    <!--  配置信息--->
+    <a-modal v-model="areaVisibleView" :title="$t('configurationInformation')" width='550px'  :footer="null">
+      <div class="content-text">
+        <div class="text-field">
+          <span class="text-field-left" :title="$t('configurationName')">{{$t('configurationName')}}:</span>
+          <span class="text-field-right"
+          >{{configDetail.configName}}</span>
+        </div>
+      </div>
+      <div class="content-text">
+        <div class="text-field">
+          <span class="text-field-left" :title="$t('Model')">{{$t('Model')}}:</span>
+          <span class="text-field-right"
+          >{{configDetail.carType}}</span>
+        </div>
+        <div class="text-field">
+          <span class="text-field-left" :title="$t('electricMachinery')">{{$t('electricMachinery')}}:</span>
+          <span class="text-field-right"
+          >{{configDetail.motor}}</span>
+        </div>
+      </div>
+      <div class="content-text">
+        <div class="text-field">
+          <span class="text-field-left" :title="$t('Version')">{{$t('Version')}}:</span>
+          <span class="text-field-right"
+          >{{configDetail.version}}</span>
+        </div>
+        <div class="text-field">
+          <span class="text-field-left" :title="$t('Battery')">{{$t('Battery')}}:</span>
+          <span class="text-field-right"
+          >{{configDetail.battery}}</span>
+        </div>
+      </div>
+    </a-modal>
  </div>
 </template>

@@ -115,6 +139,7 @@ import CollectionType from '@/components/CollectionType'
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 import axios from 'axios'
 import Vue from 'vue'
+import VueDraggableResizable from 'vue-draggable-resizable'
 export default {
  name: 'index',
  props: {
@@ -135,9 +160,48 @@ export default {
    }
  },
  components: {
-    CollectionType
+    CollectionType,
+    VueDraggableResizable
  },
  data() {
+    this.components = {
+      header: {
+        cell: (h, props, children) => {
+          const { key, ...restProps } = props
+
+          // 此处的this.columns 是定义的table的表头属性变量
+
+          const col = this.columns.find((col) => {
+            const k = col.dataIndex || col.key
+            return k === key
+          })
+
+          if (!col || !col.width) {
+            return h('th', { ...restProps }, [...children])
+          }
+
+          const dragProps = {
+            key: col.dataIndex || col.key,
+            class: 'table-draggable-handle',
+            attrs: {
+              w: 10,
+              x: col.width,
+              z: 1,
+              axis: 'x',
+              draggable: true,
+              resizable: false,
+            },
+            on: {
+              dragging: (x, y) => {
+                col.width = Math.max(x, 1)
+              },
+            },
+          }
+          const drag = h('vue-draggable-resizable', { ...dragProps })
+          return h('th', { ...restProps, class: 'resize-table-th' }, [...children, drag])
+        },
+      },
+    }
    return {
      token:Vue.ls.get(ACCESS_TOKEN),
      jsonBody: [],
@@ -177,11 +241,44 @@ export default {
      querySdtList: [], // 工程接口人
      Dateline: {},
      getquerySdtId: '', // 当前工程接口人的id
+      areaVisibleView: false, // 查看配置得弹框
+      configDetail: {}, // 查看配置得详细信息
    }
  },
  mounted() {
  },
  methods: {
+    // 查看配置详细信息
+    onClickSee(val) {
+      let _this = this
+      this.areaVisibleView = true
+      axios({
+        url: `/jero-boot/params/config/getById?id=${val.sortColumn.dataIndex}`,
+        method: 'get',
+        transformRequest: [function (data) {
+          let ret = ''
+          for (let it in data) {
+            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
+          }
+          return ret
+        }],
+        headers: {
+          'Content-Type': 'application/x-www-form-urlencoded',
+          'X-Access-Token':_this.token
+        }
+      })
+        .then( (res) =>{
+          console.log(res)
+          if (res.data.success) {
+            this.configDetail = res.data.result
+          }else{
+            _this.$message.warning(res.data.result)
+          }
+        })
+        .catch( (error) =>{
+          console.log(error);
+        });
+    },
    // 获取工程接口人
    getquerySdtList(record) {
      // 当前工程接口人的id
@@ -274,34 +371,36 @@ export default {
          var jsonHead = res.result
          this.columns = []
          jsonHead.forEach((res, index) => {
-            this.columns.push({
-              title: res.db_field_txt,
-              dataIndex: res.db_field_name,
-              align: 'center',
-              ellipsis: true,
-              sorter: res.sort
-            })
-            if (res.type) {
-              this.columns[index].scopedSlots = {
-                customRender: 'detailClick'
+            // 配置列
+            if(res.type) {
+              this.columns.push({
+                dataIndex: res.db_field_name,
+                align: 'center',
+                ellipsis: true,
+                sorter: res.sort,
+                sortOrder: res.db_field_txt
+              })
+                this.columns[index].scopedSlots = {
+                  customRender: 'detailClick',
+                  title: 'titleName'
+                }
+              //  非配置列
+              } else {
+                this.columns.push({
+                  title: res.db_field_txt,
+                  dataIndex: res.db_field_name,
+                  align: 'center',
+                  ellipsis: true,
+                  sorter: res.sort
+                })
+              if(res.click) {
+                // 工程接口人列表修改
+                this.columns[index].scopedSlots = {
+                  customRender: 'operationbtn'
+                }
              }
            }
-          if(res.click) {
-            // 工程接口人列表修改
-            this.columns[index].scopedSlots = {
-              customRender: 'operationbtn'
-            }
-          }
          })
-          if (this.showAction) {
-            this.columns.push({
-              title: this.$t('operation'),
-              align: 'center',
-              fixed: 'right',
-              width: width,
-              scopedSlots: { customRender: 'operation' }
-            })
-          }
        }
      })
    },
@@ -382,6 +481,37 @@ export default {
 .ant-table td {
  white-space: nowrap;
 }
+.content-text {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  .text-field {
+    width: 50%;
+    margin-bottom: 8px;
+    display: flex;
+    .text-field-left {
+      width: 100px;
+      display: inline-block;
+      font-size: 14px;
+      font-weight: 400;
+      color: #6F7385;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      margin-right: 24px;
+    }
+
+    .text-field-right {
+      display: inline-block;
+      font-size: 16px;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      overflow: hidden;
+      color: #040B29;
+      font-weight: 400;
+    }
+  }
+}
 </style>
 <style scoped>
 .box {
@@ -398,4 +528,20 @@ export default {
  text-align: right;
  margin-top: 20px;
 }
+.table-draggable-handle {
+  /* width: 10px !important; */
+  height: 100% !important;
+  left: auto !important;
+  right: -5px;
+  cursor: col-resize;
+  touch-action: none;
+  border: none;
+  position: absolute;
+  transform: none !important;
+  bottom: 0;
+}
+.resize-table-th {
+  position: relative;
+}
+
 </style>
@@ -56,7 +56,9 @@ import '@/assets/less/JAreaLinkage.less'
 import VueAreaLinkage from 'vue-area-linkage'
 import '@/components/jero/JVxeTable/install'
 import '@/components/JVxeCells/install'
-
+// 挂载全局使用的方法
+import VueDraggableResizable from 'vue-draggable-resizable'
+Vue.component('vue-draggable-resizable', VueDraggableResizable)
 Vue.config.productionTip = false
 Vue.use(Storage, config.storageOptions)
 Vue.use(Antd)
@@ -72,17 +72,24 @@
        @showSizeChange="SizeChange"
      />
    </div>
+<!--    参数模板-->
    <a-modal v-model="areaVisible" :title="$t('parameterTemplate')" width='750px' :footer="null">
-      <parameter-template v-if='areaVisible' @areaVisible='handleCancel' :templateTitle='templatetitle'
-                          :selectedRowKeyS='selectedRowKeys' :rowId='rowId' :version='version' :projectId='this.$route.query.id'></parameter-template>
+      <parameter-template-add v-if='areaVisible' @areaVisible='handleCancel' :templateTitle='templatetitle'
+                          :selectedRowKeyS='selectedRowKeys' :rowId='rowId' :version='version' :projectId='this.$route.query.id'></parameter-template-add>
    </a-modal>
+<!--    配置-->
    <configure ref="configureRef" :url='url' :itemId='itemId'/>
+<!--    历史版本-->
+    <a-modal v-model="historicalVisible" :title="$t('historicalVersion')" width='750px' :footer="null">
+      <historical-version v-if='historicalVisible' ></historical-version>
+    </a-modal>
  </a-card>
 </template>

 <script>
  import ImportFile from '@/components/ImportFile/index'
-  import ParameterTemplate from '../dialog/ParameterTemplate'
+  import ParameterTemplateAdd from '../dialog/ParameterTemplateAdd'
+  import HistoricalVersion from '../dialog/historicalVersion'
  import { getAction,postAction } from '../../../api/manage'
  import Configure from '../dialog/configure'
  import axios from 'axios'
@@ -91,8 +98,9 @@
    name: 'TaskParameterCollection',
    components:{
      ImportFile,
-      ParameterTemplate,
-      Configure
+      ParameterTemplateAdd,
+      Configure,
+      HistoricalVersion
    },
    data(){
       return{
@@ -165,7 +173,8 @@
         templatetitleId: '',
         rowId: '',
         version: 0,
-         itemId: ''
+         itemId: '',
+         historicalVisible: false
       }
    },
    mounted() {
@@ -201,7 +210,8 @@
      },
      //
      historicalVersion() {
-
+        this.historicalVisible = true
+        console.log('历史版本。。。。')
      },
      // 配置
      configure(item) {
@@ -0,0 +1,265 @@
+<template>
+  <div class='diolag-area'>
+    <a-table
+      class='table-area'
+      ref='table'
+      size='middle'
+      rowKey='id'
+      :columns='columns'
+      :dataSource='areaTable'
+      :pagination='false'
+      :loading='loading'
+      :scroll='{x: 600}'
+      @change='handleTableChange'>
+      <a slot='name' slot-scope='text'>{{ text }}</a>
+      <span slot='action' slot-scope='text, record'>
+          <a class='action-edit' @click='editArea(record.id)' v-has="'area:edit'">{{ $t('edit') }}</a>
+          <a style='color:red' href='javascript:;' @click=' deleteArea(record.id)'
+             v-has="'area:delete'">{{ $t('delete') }}</a>
+      </span>
+    </a-table>
+    <div class='drawer-bootom-button'>
+      <a-button style='margin-right: .8rem' @click='handleCancel'>{{ $t('cancel') }}</a-button>
+      <a-button @click='handleSubmit' type='primary' :loading='confirmLoading'>{{ $t('submit') }}</a-button>
+    </div>
+  </div>
+</template>
+
+<script>
+import { putAction, postAction, getAction, deleteAction } from '@/api/manage'
+
+export default {
+  name: 'diolagArea',
+  components: {},
+  data() {
+    return {
+      title: this.$t('add'),
+      total: 0,
+      selectedRowKeysDate: {},
+      loading: false,
+      editId: '',
+      columns: [
+        {
+          title: this.$t('VersionNumber'),
+          dataIndex: 'region_dictText',
+          key: 'showArea',
+          align: 'center',
+          ellipsis: true
+        },
+        {
+          title: this.$t('operation'),
+          align: 'center',
+          dataIndex: 'paramsTemplateName',
+          ellipsis: true
+        }
+      ],
+      newVisible: false,
+      areaTable: [],
+      flag: false,  //表单提交标识
+      spinLoading: false,
+      confirmLoading: false,
+      templatetitle: '',
+      selectedRowKeys: []
+    }
+  },
+  props: {
+
+  },
+  mounted() {
+    this.loadData()
+  },
+  methods: {
+    loadData() {
+      this.loading = true
+      let params = {
+        ...this.form
+      }
+      getAction(`params/manifest/getParamsTemplateList`, params).then(res => {
+        if (res.success) {
+          this.areaTable = [...res.result]
+          this.total = res.result.total
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    searchQuery() {
+      this.loadData()
+    },
+    searchReset() {
+      this.form = {}
+      this.loadData()
+    },
+    handleCancel() {
+      this.$emit('areaVisible', false)
+    },
+    onSelectChange(selectedRowKeys, selectedRowKeysDate) {
+      this.selectedRowKeysDate = selectedRowKeysDate
+      this.selectedRowKeys = selectedRowKeys
+    },
+    handleTableChange(val) {
+    },
+    showModal() {
+      this.title = this.$t('add')
+      this.newVisible = true
+      this.form = {}
+    },
+    //新增
+    handleSubmit() {
+      if (this.selectedRowKeys.length == 0) {
+        this.$message.warning(this.$t('pleaseSelectData'))
+      } else if (this.selectedRowKeys.length > 1) {
+        this.$message.warning(this.$t('OnlyOneSelected'))
+      } else {
+        this.$refs.ruleForm.validate(valid => {
+          if (valid) {
+            this.flag = true
+            this.spinLoading = true
+            // 新增編輯之前 判断 标题唯一
+            getAction(`params/manifest/verifyTitle?projectId=${this.$route.query.id}
+                  &title=${this.templatetitle}`, {})
+              .then(res => {
+                if (res.success) {
+                  let postDate = {
+                    title: this.templatetitle,
+                    paramsTemplateId: this.rowId || this.selectedRowKeysDate[0].id,
+                    paramsTemplatePublishVersion: this.version || this.selectedRowKeysDate[0].version,
+                    projectId: this.projectId
+                  }
+                  if (this.rowId) {
+                    //编辑
+                    postAction(`params/manifest/edit`, postDate).then(res => {
+                        if (res.success) {
+                          this.newVisible = false
+                          this.$emit('areaVisible', false)
+                          this.$message.success(this.$t('OperationSuccessful'))
+                        } else {
+                          this.$message.warning(res.message)
+                        }
+                      }
+                    ).finally(() => {
+                      this.flag = false
+                      this.spinLoading = false
+                      this.newVisible = false
+                    })
+                  } else {
+                    //新增
+                    postAction(`params/manifest/add`, postDate).then(res => {
+                        if (res.success) {
+                          this.newVisible = false
+                          this.$emit('areaVisible', false)
+                          this.$message.success(this.$t('OperationSuccessful'))
+                        } else {
+                          this.$message.warning(res.message)
+                        }
+                      }
+                    ).finally(() => {
+                      this.flag = false
+                      this.spinLoading = false
+                      this.newVisible = false
+                    })
+                  }
+                } else {
+                  this.$message.warning(res.message)
+                }
+              }).finally(() => {
+              this.loading = false
+            })
+          } else {
+            return false
+          }
+        })
+      }
+    },
+    cancelModel() {
+      this.newVisible = false
+      this.$refs.ruleForm.resetFields()
+    },
+    //删除按钮
+    deleteArea(val) {
+      this.$confirm({
+        title: this.$t('confirmDeletion'),
+        content: '',
+        onOk:
+          async () => {
+            getAction(`tag/onlCgformArea/delete`, { id: val }).then((res) => {
+              if (res.success) {
+                this.$message.success(this.$t('OperationSuccessful'))
+                if (this.areaTable.length == 1 && this.queryParams.pageNo != 1) {
+                  this.queryParams.pageNo = this.queryParams.pageNo - 1
+                }
+                this.loadData()
+              } else {
+                // this.$message.warning(res.message)
+                if (res.message == '该展示区域有关联数据，无法删除！') {
+                  this.$message.warning(this.$t('noDelete'))
+                } else {
+                  this.$message.warning(this.$t('operationFailed'))
+                }
+              }
+            })
+          }
+      })
+    },
+    //编辑按钮
+    editArea(val) {
+      this.title = this.$t('edit')
+      this.newVisible = true
+      let params = {
+        id: val
+      }
+      getAction(`tag/onlCgformArea/queryById`, params).then((res) => {
+        if (res.success) {
+          this.form = { ...res.result }
+          // this.$emit('updateOk',res.result)
+
+        }
+      })
+    }
+  },
+  watch: {
+    templateTitle(val) {
+      this.templatetitle = val
+    },
+    selectedRowKeyS(val) {
+      this.selectedRowKeys = val
+    }
+  }
+
+}
+</script>
+
+<style lang='less' scoped>
+@import '~@assets/less/common.less';
+
+.diolag-area {
+  .table-area {
+    margin: 20px 0;
+
+    .action-edit {
+      margin-right: 10px;
+    }
+  }
+
+  .table-del {
+    color: red;
+  }
+}
+.drawer-bootom-button{
+  display: flex;
+  justify-content: center;
+}
+</style>
+<style lang='less'>
+.area-module {
+  .ant-modal-wrap {
+    .ant-modal {
+      .ant-modal-content {
+        .ant-modal-footer {
+          text-align: center;
+        }
+      }
+    }
+  }
+}
+</style>