属性标识管理

2024-03-15 14:50:16 +08:00
parent 1661fdf419
commit edc717779f
5 changed files with 513 additions and 0 deletions
@@ -0,0 +1,12 @@
+import { getAction, postAction } from './manage.js'
+
+// 属性标识管理-新增
+const addLabel = (params) => postAction('/laws/lawsLabelDatabase/add', params)
+
+// 属性标识管理-编辑
+const editLabel = (params) => postAction('/laws/lawsLabelDatabase/edit', params)
+
+export {
+  addLabel,
+  editLabel,
+}
@@ -587,6 +587,13 @@ module.exports = {
    downTemplate: 'Click to download template',
    noFileMsg: 'Please select a file'
  },
+  // 属性标识管理
+  attributeIdentification:{
+    labelName:'Label Name',
+    firstLabel:'First Label',
+    secondLabel:'Second Label',
+    thirdLabel:'Third Label',
+  },
  // 系统管理
  system,
  // 个人中心
@@ -636,6 +636,14 @@ module.exports = {
    primaryNodeName: '名称',
    selectedData: '已选数据'
  },
+  // 属性标识管理
+  attributeIdentification:{
+    labelName:'标签名称',
+    firstLabel:'一级标签',
+    secondLabel:'二级标签',
+    thirdLabel:'三级标签',
+  },
+
  // 系统管理
  system,
  // 个人中心
@@ -0,0 +1,288 @@
+<template>
+  <a-card :bordered="false">
+    <!-- 查询区域 -->
+    <div class="table-page-search-wrapper">
+      <!-- 标签名称 -->
+      <a-form layout="inline" @keyup.enter.native="searchQuery">
+        <a-row :gutter="24">
+          <a-col :span="10">
+            <a-form-item :label="$t('attributeIdentification.labelName')" :labelCol="labelCol" :wrapperCol="wrapperCol">
+              <a-input :placeholder="$t('pleaseEnter') + $t('attributeIdentification.labelName')" v-model="queryParam[searchField]" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="8">
+            <span style="float: left;overflow: hidden;" class="table-page-search-submitButtons">
+              <a-button type="primary" @click="searchQuery" icon="search" style="margin-left: 8px">{{ $t('query') }}</a-button>
+              <a-button type="primary" @click="searchReset" icon="reload" ghost>{{ $t('reset') }}</a-button>
+            </span>
+          </a-col>
+        </a-row>
+      </a-form>
+    </div>
+
+    <!-- 按钮区域 -->
+    <div class="table-operator">
+      <!-- 新增 -->
+      <a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
+      <!-- 批量删除 -->
+      <a-button type="primary" icon="delete" @click="batchDel">{{ $t('batchDelete') }}</a-button>
+    </div>
+
+    <div class="modal-content">
+      <a-table
+        :columns="columns"
+        rowKey="code"
+        bordered
+        :scroll="{x: '100%'}"
+        :data-source="dataSource"
+        :pagination="ipagination"
+        :row-selection="rowSelection"
+        :loading="confirmLoading"
+        :childrenColumnName="childrenFieldName"
+        @change="handleTableChange">
+        <template slot="text" slot-scope="text">
+          <a-tooltip overlay-class-name="tooltip-style">
+            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+            <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+          </a-tooltip>
+        </template>
+        <!--    操作栏   -->
+        <template slot="action" slot-scope="text, record, index" class="action-span-cell">
+          <a @click="handleEdit(record, index)" v-show='handleShowEdit(record)'  class="table-ope-btn">{{ $t('edit') }}</a>
+          <a @click="handleDelete(index)" class="table-ope-btn" style="margin-left: 8px">{{ $t('delete') }}</a>
+        </template>
+      </a-table>
+    </div>
+    <!--新增、编辑-->
+    <attribute-identification-modal ref='modalForm' @ok="modalFormOk"/>
+  </a-card>
+</template>
+
+<script>
+import { getAction, postAction } from '../../../api/manage'
+import { JeroListMixin } from '../../../mixins/JeroListMixin.js'
+import AttributeIdentificationModal from './modules/AttributeIdentificationModal'
+
+export default {
+  name: 'TreeSelectModal',
+  components:{AttributeIdentificationModal},
+  mixins: [JeroListMixin],
+  props: {
+    dictId: {
+      type: String,
+      required: false,
+      default: ''
+    },
+    type: {
+      type: String,
+      required: false,
+      default: 'checkbox'
+    },
+    // 是否校验必选
+    checkRequired: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 标签库的限制，只能选第三级
+    isTagLibraryRestriction: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+  },
+  computed: {
+    rowSelection () {
+      return {
+        selectedRowKeys: this.selectedRowKeys,
+        onChange: this.onSelectChange,
+        type: this.type,
+        getCheckboxProps: record => ({
+          props: {
+            disabled: this.isTagLibraryRestriction ? record.level + '' !== '3' : false
+          }
+        })
+      }
+    }
+  },
+  data () {
+    return {
+      url:{
+        queryLabelTree:'/laws/lawsLabelDatabase/queryLabelTree',
+        deleteBatch:'/laws/lawsLabelDatabase/deleteBatch'
+      },
+      confirmLoading: false,
+      queryParam: {},
+      labelCol: {
+        span: 8
+      },
+      wrapperCol: {
+        span: 16
+      },
+      dataSourceRight: [],
+      filters: {},
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 5,
+        pageSizeOptions: ['5', '10', '20', '30', '100', '200'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + total + this.$t('strip')
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      columns: [
+        {
+          title: this.$t('system.tag.name'),
+          dataIndex: 'name'
+        },
+        {
+          title: this.$t('operation'),
+          scopedSlots: { customRender: 'action' },
+          align: 'center',
+          width: 150
+        }
+      ],
+      dataSource: [],
+      selectedRowKeys: [],
+      childrenFieldName: 'childrenList',
+      searchField: 'nodeName'
+    }
+  },
+  mounted() {
+    this.searchQuery()
+  },
+  methods: {
+    searchQuery () {
+      this.loadData(1)
+    },
+    searchReset () {
+      this.queryParam = {}
+      this.loadData(1)
+    },
+    loadData (arg) {
+      if (arg) {
+        this.ipagination.current = 1
+      }
+      this.confirmLoading = true
+      const params = Object.assign({}, this.queryParam, this.filters)
+      params.pageNo = this.ipagination.current
+      params.pageSize = this.ipagination.pageSize
+      getAction(this.url.queryLabelTree, params).then(res => {
+        if (res.success) {
+          this.dataSource = res.result.records || res.result
+          if (res.result.total) {
+            this.ipagination.total = res.result.total
+          } else {
+            this.ipagination.total = 0
+          }
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    },
+    onSelectChange (selectedRowKeys, selectedRows) {
+      this.selectedRowKeys = selectedRowKeys
+      if (this.type === 'checkbox') {
+        if (selectedRowKeys.length > this.dataSourceRight.length) {
+          // 说明是增加了数据
+          for (const rowIndex in selectedRows) {
+            if (!this.dataSourceRight.find(item => item.code === selectedRows[rowIndex].code)) {
+              // 右侧不存在，追加到右侧表格
+              this.dataSourceRight.push(selectedRows[rowIndex])
+            }
+          }
+        } else {
+          // 说明是删除了数据
+          if (selectedRowKeys && selectedRowKeys.length > 0) {
+            // 没有选中数据，说明这一页没有选中数据了
+            for (let i = 0; i < this.dataSourceRight.length; i++) {
+              if (!selectedRowKeys.find(item => item === this.dataSourceRight[i].code)) {
+                // 表格选中中没有找到这一条数据，说明已经被删了
+                this.dataSourceRight.splice(i, 1)
+                i--
+              }
+            }
+          } else {
+            this.dataSourceRight = []
+          }
+        }
+      } else {
+        this.dataSourceRight = selectedRows
+      }
+    },
+    handleShowEdit(record){
+      // console.log('handlwShow record',record)
+      // 只有第三级标签允许修改
+      return record.code.split('-').length === 3
+    },
+    handleTableChange (pagination) {
+      this.ipagination = pagination
+      this.loadData()
+    },
+    modalFormOk () {
+      // 新增/修改 成功时，重载列表
+      this.loadData()
+      // 清空列表选中
+      this.onClearSelected()
+    },
+  }
+}
+</script>
+
+<style scoped lang="less">
+.modal-content {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+
+  &-left {
+    width: 58%;
+  }
+
+  &-right {
+    width: 40%;
+  }
+
+  &-title-div {
+    display: flex;
+    align-items: center;
+    height: 28px;
+    margin: 20px 0;
+
+    .modal-content-title {
+      color: #1D2129;
+      font-weight: 500;
+      margin-right: 12px;
+      margin-bottom: 0;
+    }
+  }
+}
+
+.name-content {
+  display: flex;
+  flex-wrap: wrap;
+
+  .name-div {
+    width: auto;
+    padding: 5px 16px;
+    margin-right: 12px;
+    margin-top: 8px;
+    background: rgba(213, 44, 38, 0.08);
+    border-radius: 4px 4px 4px 4px;
+    opacity: 1;
+    color: @primary-color;
+    white-space: nowrap;
+
+    /deep/ .anticon {
+      margin-left: 4px;
+    }
+  }
+}
+
+/deep/ .ant-form-item-label {
+  min-width: 70px !important;
+}
+</style>
@@ -0,0 +1,198 @@
+<template>
+  <j-modal
+    :title="title"
+    :width="width"
+    :visible="visible"
+    :maskClosable="false"
+    :confirmLoading="confirmLoading"
+    :ok-text="$t('preservation')"
+    :cancel-text="$t('cancel')"
+    @ok="handleOk"
+    @cancel="handleCancel">
+
+    <a-spin :spinning="confirmLoading">
+      <a-form :form="form">
+        <!--一级标签-->
+        <a-row :gutter="30">
+          <a-col :span="18">
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('attributeIdentification.firstLabel')">
+              <j-dict-select-tag v-decorator="['firstLabel', validatorRules.firstLabel]"
+                                 :placeholder="$t('pleaseSelect') + $t('attributeIdentification.firstLabel')"
+                                 dict-code="laws_label_database,name,id,parent_id is null and del_flag = 0"
+                                 @change='firstLabelChange'
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+        <!--二级标签-->
+        <a-row :gutter="30">
+          <a-col :span="18">
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('attributeIdentification.secondLabel')">
+              <j-dict-select-tag v-decorator="['secondLabel', validatorRules.secondLabel]"
+                                 :placeholder="$t('pleaseSelect') + $t('attributeIdentification.secondLabel')"
+                                 :options = 'secondOptions'
+                                 @change='secondLabelChange'
+              />
+            </a-form-item>
+          </a-col>
+        </a-row>
+          <!--三级标签-->
+        <a-row :gutter="30">
+          <a-col :span="18">
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('attributeIdentification.thirdLabel')">
+              <a-input v-decorator="['name', validatorRules.thirdLabel]"
+                       :placeholder="$t('pleaseEnter') + $t('attributeIdentification.thirdLabel')"
+                       :maxLength="50" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+
+      </a-form>
+    </a-spin>
+
+  </j-modal>
+</template>
+
+<script>
+import UserSelection from '../../../../components/selection/UserSelection.vue'
+import { addLabel, editLabel } from '../../../../api/label.js'
+import { ajaxGetDictItems } from '@/api/api'
+import { postAction } from '@/api/manage'
+
+
+
+export default {
+  name: 'VehicleItemLibraryModal',
+  components: { UserSelection },
+  data () {
+    return {
+      title: this.$t('newlyAdded'),
+      url:{
+        list: '/laws/lawsLabelDatabase/list',
+      },
+      width: 800,
+      visible: false,
+      confirmLoading: false,
+      model: {},
+      form: this.$form.createForm(this),
+      labelCol: {
+        xs: { span: 24 },
+        sm: { span: 8 }
+      },
+      wrapperCol: {
+        xs: { span: 24 },
+        sm: { span: 16 }
+      },
+      secondOptions:[],
+      validatorRules: {
+        // 一级标签
+        firstLabel: {
+          rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('standardRegulationLibrary.firstLabel') }],
+          validateTrigger: 'blur'
+        },
+        // 二级标签
+        secondLabel: {
+          rules: [{ required: true, message: this.$t('pleaseSelect') + this.$t('attributeIdentification.secondLabel') }],
+          validateTrigger: 'blur'
+        },
+        // 三级标签
+        thirdLabel: {
+          rules: [{ required: true, message: this.$t('pleaseEnter') + this.$t('attributeIdentification.thirdLabel') }],
+          validateTrigger: 'blur'
+        },
+      }
+    }
+  },
+  methods: {
+    add () {
+      this.form.resetFields()
+      this.visible = true
+      console.log('add','this.model',this.model)
+      this.$nextTick(() => {
+        this.form.setFieldsValue(this.model)
+      })
+    },
+    edit (record) {
+      this.form.resetFields()
+      this.model = Object.assign({}, record)
+      console.log('edit')
+      console.log('this.model', this.model)
+      // 根据parentId查询二级标签信息：
+      postAction(this.url.list,{id:this.model.parentId}).then((res) => {
+        if(res.success){
+          this.model.secondLabel = res.result[0].id;
+          this.model.firstLabel = res.result[0].parentId;
+          // 更新二级标签可选项
+          ajaxGetDictItems("laws_label_database,name,id,parent_id = '" + this.model.firstLabel + "' and del_flag = 0", null).then((res) => {
+            if (res.success) {
+              this.secondOptions = res.result
+              // 显示编辑页面
+              this.visible = true
+              this.$nextTick(() => {
+                this.form.setFieldsValue(this.model)
+              })
+            }
+          })
+        }
+      })
+    },
+    handleOk () {
+      console.log('handleOk')
+      this.form.validateFields((errors, values) => {
+        if (!errors) {
+          this.confirmLoading = true
+          const formData = Object.assign(this.model, values)
+          console.log('formData',formData)
+          let submitFunc
+          if (this.model.id) {
+            submitFunc = editLabel
+          } else {
+            submitFunc = addLabel
+          }
+          submitFunc(formData).then(res => {
+            if (res.success) {
+              this.$message.success(res.message)
+              this.close()
+              this.$emit('ok')
+            } else {
+              this.$message.warn(res.message)
+            }
+          }).finally(() => {
+            this.confirmLoading = false
+          })
+        }
+      })
+    },
+    firstLabelChange(id) {
+      console.log('firstLabelChange')
+      console.log('this.form',this.form)
+      this.model.secondLabel = null;
+      this.form.setFieldsValue(this.model);
+      let secondDictCode = "laws_label_database,name,id,parent_id = '" + id + "' and del_flag = 0";
+      ajaxGetDictItems(secondDictCode, null).then((res) => {
+        if (res.success) {
+          this.secondOptions = res.result
+        }
+      })
+    },
+    secondLabelChange(id) {
+      console.log('secondLabelChange')
+      console.log('this.form',this.form)
+      this.model.parentId = id;
+      this.form.setFieldsValue(this.model);
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+      this.model = {}
+      this.form.resetFields()
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+
+</style>