[update] 企业标准模块

2023-09-08 10:51:38 +08:00
parent 750129271b
commit 4234096d4f
4 changed files with 217 additions and 66 deletions
@@ -0,0 +1,338 @@
+<template>
+  <a-card :bordered="false" class="page-left-right-layout">
+    <div class="page-left-box">
+      <!--      $t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')-->
+      <a-input-search v-model="treeInput" :placeholder="$t('pleaseEnterTreeSystem')"
+                      @change="handleTreeChange" />
+      <a-tree
+        :show-line="true"
+        :show-icon="true"
+        :tree-data="treeData"
+        :selectedKeys="currentTreeNode"
+        :replaceFields="{children: 'subset', title: 'name', key: 'id'}"
+        :expanded-keys="expandedKeys"
+        :auto-expand-parent="autoExpandParent"
+        @expand="treeExpand"
+        @select="treeSelect">
+        <a-icon type="folder" slot="folder" class="tree-icon" />
+
+        <template #custom="{name, id}">
+          <div class="tree-operate-node" @mouseenter="handleTreeMouseover(id)" @mouseleave="handleTreeMouseout(id)">
+            <a-tooltip>
+              <template #title>
+                {{ name }}
+              </template>
+              <span class="tree-node-custom-title">{{ name }}</span>
+            </a-tooltip>
+            <template v-if="id === mouseInNodeKey">
+              <a-button icon="plus" class="tree-operate-node-btn">
+              </a-button>
+              <a-button class="tree-operate-node-btn">
+                <i class="iconfont icon-bianji" />
+              </a-button>
+              <a-button class="tree-operate-node-btn">
+                <i class="iconfont icon-shanchu_" />
+              </a-button>
+            </template>
+          </div>
+        </template>
+      </a-tree>
+    </div>
+    <div class="page-right-box">
+      <div class="table-page-search-wrapper">
+        <search ref="searchRef"
+                :flag="flag"
+                :get-query-condition-func="getQueryConditionFunc"
+                @search="searchQuery"
+                @reset="searchReset" />
+      </div>
+      <div class="table-operator">
+        <a-button icon="plus" type="primary" @click="handleAdd">{{ $t('newlyAdded') }}</a-button>
+        <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImportExcel">
+          <a-button icon="upload">{{ $t('import') }}</a-button>
+        </a-upload>
+        <a-button icon="export" @click="handleExportXls">{{ $t('export') }}</a-button>
+        <a-button icon="mail" @click="handleFileExport">{{ $t('exportWithFile') }}</a-button>
+        <a-button icon="download" @click="downTemplate($t('enterpriseStandardLibrary.enterpriseStandard.templateExport'))">{{ $t('templateDownload') }}</a-button>
+        <a-button icon="delete" @click="batchDel">{{ $t('batchDelete') }}</a-button>
+        <a-button icon="setting" @click="handleAllocationStandard">{{ $t('enterpriseStandardLibrary.enterpriseStandard.allocationStandard') }}</a-button>
+        <a-button icon="setting" @click="handleShiftOutStandard">{{ $t('enterpriseStandardLibrary.enterpriseStandard.shiftOutStandard') }}</a-button>
+        <a-button icon="setting" @click="handleInitChange">{{ $t('enterpriseStandardLibrary.enterpriseStandard.initChange') }}</a-button>
+        <a-button icon="setting" @click="handleTemporaryPermissSet">{{ $t('enterpriseStandardLibrary.enterpriseStandard.temporaryPermissionSet') }}</a-button>
+      </div>
+      <div>
+        <j-table
+          v-if="columns && columns.length > 0"
+          :columns="columns"
+          :dataSource="dataSource"
+          :can-drag="true"
+          rowKey="id"
+          :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+          :pagination="ipagination"
+          :scroll="{x: '100%'}"
+          @change="tableOnChange">
+          <!--   在混入里已经过滤过没有权限的按钮了  -->
+          <template slot="operation" slot-scope="{text, record}">
+            <a v-for="(operation, index) in operationList.slice(0, operateMaxNum)" :key="index" @click="operationClick(operation,record)">
+              <template v-if="operation.text === $t('enterpriseStandardLibrary.enterpriseStandard.collection')">
+                <i class="iconfont icon-star1" v-show="record.collectFlag === 1" />
+                <i class="iconfont icon-star" v-show="!record.collectFlag || record.collectFlag === 0" />
+              </template>
+            </a>
+            <a-divider v-if="operationList.length >= operateMaxNum" type="vertical" />
+            <a-dropdown v-if="operationList.length >= operateMaxNum" placement="bottomCenter">
+              <a-icon type="more" class="operate-icon-btn operate-icon-more" />
+              <a-menu slot="overlay">
+                <a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
+                  <a @click="operationClick(operation,record)">
+                    <!--                      编辑图标-->
+                    <i class="iconfont icon-bianji operate-btn-icon" v-if="operation.text === $t('edit')" />
+                    <!--                      分享图标-->
+                    <i class="iconfont icon-fangxingfenxiang operate-btn-icon" v-if="operation.text === $t('share')" />
+                    <!--                      删除图标-->
+                    <i class="iconfont icon-shanchu_ operate-btn-icon" v-if="operation.text === $t('delete')" />
+                    {{ operation.text }}
+                  </a>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </template>
+
+          <!--        详情-->
+          <template slot="detailClick" slot-scope="{text, record}">
+            <a-tooltip overlay-class-name="tooltip-style">
+              <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+              <a class="table-text textName" @click="detailClick(record)" v-if="text || text === 0">{{ text }}</a>
+              <div class="table-text" v-else>{{ global.emptyLine }}</div>
+            </a-tooltip>
+          </template>
+
+        </j-table>
+      </div>
+    </div>
+    <enterprise-standard-modal ref="modalForm" @ok="modalFormOk"></enterprise-standard-modal>
+  </a-card>
+</template>
+
+<script>
+import '@assets/less/common.less'
+import JTable from '@/components/jero/JTable'
+// 搜索组件
+import Search from '@/components/customField/Search'
+import { ConfigurableTableMixin } from '@/mixins/ConfigurableTableMixin'
+import { getEnterpriseStandardTableHeader, getEnterpriseStandardSearchForm } from '@api/enterpriseStandardLibraryApi'
+import EnterpriseStandardModal from './modules/EnterpriseStandardModal'
+
+export default {
+  name: 'EnterpriseStandardList',
+  components: { EnterpriseStandardModal, JTable, Search },
+  mixins: [ConfigurableTableMixin],
+  data () {
+    return {
+      flag: '3',
+      treeInput: '', // 左侧树搜索框内容
+      treeData: [], // 左侧树数据
+      treeDataList: [], // 左侧树的数组结构，用于搜索
+      expandedKeys: [],
+      autoExpandParent: true,
+      currentTreeNode: null, // 当前选中的树节点
+      mouseInNodeKey: null, // 鼠标悬浮的节点key值
+      operationList: [
+        {
+          text: this.$t('enterpriseStandardLibrary.enterpriseStandard.collection'),
+          clickEvent: 'handleCollection',
+          has: 'enterpriseStandard:collection'
+        },
+        {
+          text: this.$t('edit'),
+          clickEvent: 'handleEdit',
+          has: 'enterpriseStandard:edit'
+        },
+        {
+          text: this.$t('share'),
+          clickEvent: 'handleShare',
+          has: 'enterpriseStandard:share'
+        },
+        {
+          text: this.$t('delete'),
+          clickEvent: 'handleDelete',
+          has: 'enterpriseStandard:delete'
+        }
+      ],
+      selectedRowKeys: [],
+      loading: false,
+      getTableHeaderFunc: getEnterpriseStandardTableHeader,
+      getQueryConditionFunc: getEnterpriseStandardSearchForm,
+      // url传参严格按照当前命名
+      url: {
+        list: '/laws/standard/enterprise/getCommonPage', // 表格数据
+        delete: '', // 删除
+        deleteBatch: '', // 批量删除
+        importUrl: '', // 导入
+        exportXlsUrl: '', // 导出
+        exportZipUrl: '', // 带文件导出
+        downTemplateUrl: '' // 下载导入模板
+      },
+      showAction: true, // 是否显示操作列
+      dataSource: [
+        {
+          collectFlag: '0',
+          id: 'fd045f5c5d734087a884a63664ee91f1',
+          issue_time: '',
+          region: '',
+          serial_number: '0621001编号',
+          state: '现行',
+          subscribeFlag: '0',
+          technology_territory: '',
+          title: '0621001标题',
+          title_en: '0621001Title'
+        }
+      ]
+    }
+  },
+  methods: {
+    // 获取左侧树数据
+    initTreeData (params) {
+      getWorkGroupTreeList(params).then(res => {
+        if (res.success) {
+          this.treeData = this.dealTreeData(res.result)
+          // this.treeData = res.result
+          this.treeData[0].scopedSlots = { title: 'customNoDelete' }
+          this.generateList(this.treeData)
+        } else {
+          this.treeData = []
+        }
+      })
+    },
+    // 处理左侧树数据结构
+    dealTreeData (treeData) {
+      return treeData.map(item => {
+        item.scopedSlots = { title: 'custom' }
+        if (item.subset && item.subset.length > 0) {
+          item.subset = this.dealTreeData(item.subset)
+        }
+        return item
+      })
+    },
+    // 获取左侧树的数组结构（非树结构）
+    generateList (data) {
+      for (let i = 0; i < data.length; i++) {
+        const node = data[i]
+        const id = node.id
+        this.treeDataList.push({ id, name: node.name, pid: node.pid })
+        if (node.subset) {
+          this.generateList(node.subset)
+        }
+      }
+    },
+    // 左侧树搜索框改变
+    handleTreeChange (e) {
+      const value = e.target.value
+      const expandedKeys = this.treeDataList
+        .map(item => {
+          if (item.name.indexOf(value) > -1) {
+            return item.pid
+          }
+          return null
+        })
+        .filter((item, i, self) => item && self.indexOf(item) === i)
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = true
+    },
+    // 左侧树点击展开
+    treeExpand (expandedKeys) {
+      this.expandedKeys = expandedKeys
+      this.autoExpandParent = false
+    },
+    // 左侧树点击选中
+    treeSelect (selectedKeys) {
+      this.currentTreeNode = selectedKeys
+      this.queryParam.workingGroupId = selectedKeys[0]
+      this.loadData()
+    },
+    // 左侧树鼠标移入某一目录
+    handleTreeMouseover (key) {
+      this.mouseInNodeKey = key
+    },
+    // 左侧树鼠标移出某一目录
+    handleTreeMouseout (key) {
+      if (this.mouseInNodeKey === key) {
+        this.mouseInNodeKey = null
+      }
+    },
+    // 配置标准
+    handleAllocationStandard () {
+
+    },
+    // 移出标准
+    handleShiftOutStandard () {
+
+    },
+    // 发起更改
+    handleInitChange () {
+
+    },
+    // 临时权限设置
+    handleTemporaryPermissSet () {
+
+    },
+    // 操作栏的点击
+    operationClick (operation, record) {
+      if (operation.clickEvent === 'handleDelete') {
+        this.handleDelete(record.id)
+      } else {
+        this[operation.clickEvent](record)
+      }
+    },
+    // 收藏
+    handleCollection (record) {
+
+    },
+    // 分享
+    handleShare (record) {
+
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+/deep/ .ant-tree li span.ant-tree-iconEle {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.tree-icon {
+  line-height: 24px;
+}
+
+.tree-operate-node {
+  display: flex;
+  width: 100%;
+  align-items: center;
+
+  &-btn {
+    width: 20px;
+    height: 20px;
+    background: rgba(213, 44, 38, 0.08);
+    border-radius: 2px 2px 2px 2px;
+    border: none;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-left: 4px;
+    padding: 0;
+
+    /deep/ .anticon {
+      margin-top: 2px;
+      color: #D52C26;
+    }
+
+    img {
+      width: 13px;
+      height: 13px;
+    }
+  }
+}
+</style>
@@ -0,0 +1,103 @@
+<template>
+  <a-drawer
+    :title="title"
+    :width="width"
+    placement="right"
+    :closable="true"
+    @close="handleCancel"
+    :visible="visible"
+    :maskClosable="false"
+    class="custom-drawer-style"
+  >
+    <a-spin :spinning="confirmLoading" style="width: 100%;height:100%">
+      <div class="custom-drawer-style-scroll">
+        <add-form ref="addForm"
+                  :get-form-func="getFormFunc"
+                  :get-document-info-func="getDocumentInfoFunc"
+                  @submitFormData="submitFormData" />
+      </div>
+      <div class="custom-drawer-style-bottom-btn">
+        <a-button @click="handleOk" type="primary" style="margin-bottom: 0;">
+          {{ $t('preservation') }}
+        </a-button>
+        <a-button @click="handleCancel" style="margin-bottom: 0;">{{ $t('close') }}</a-button>
+      </div>
+    </a-spin>
+  </a-drawer>
+</template>
+
+<script>
+import '@assets/less/common.less'
+import AddForm from '@/components/customField/AddForm'
+import { getEnterpriseStandardAddForm, getEnterpriseStandardInfoById } from '@/api/enterpriseStandardLibraryApi'
+import { postAction } from '@/api/manage'
+
+export default {
+  name: 'EnterpriseStandardModal',
+  components: { AddForm },
+  data () {
+    return {
+      visible: false,
+      title: '',
+      width: 800,
+      // 存储表单的数据
+      form: {},
+      confirmLoading: false,
+      getFormFunc: getEnterpriseStandardAddForm,
+      getDocumentInfoFunc: getEnterpriseStandardInfoById,
+      url: {
+        add: '/laws/standard/domestic/commonAdd',
+        edit: '/laws/standard/domestic/commonEdit'
+      }
+    }
+  },
+  methods: {
+    add () {
+      this.visible = true
+      this.$nextTick(() => {
+        this.$refs.addForm.add()
+      })
+    },
+    edit (record) {
+      this.visible = true
+    },
+    handleOk () {
+      this.confirmLoading = true
+      this.$refs.addForm.submit()
+    },
+    // 表单提交的回调，获取表单数据
+    submitFormData (formInline) {
+      let url = ''
+      if (formInline.id) {
+        url = this.url.edit
+      } else {
+        url = this.url.add
+      }
+      postAction(url, formInline).then((res) => {
+        if (res.success) {
+          this.$message.success(this.$t('operationSuccessful'))
+          if (this.formInline.id) {
+            this.$emit('ok')
+          } else {
+            this.$emit('ok')
+          }
+        } else {
+          this.$message.warning(res.message)
+        }
+      }).finally(() => {
+        this.confirmLoading = false
+      })
+    },
+    handleCancel () {
+      this.close()
+    },
+    close () {
+      this.visible = false
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>