update AddForm、Search组件修改

src/views/standardRegulationLibrary/domesticStandard/DomesticStandardList.vue

@@ -4,11 +4,10 @@
       <!--      $t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')-->
       <a-input-search v-model="treeInput" :placeholder="$t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')"
                       @search="handleTableSearch" />
-      <img src="">
       <a-tree :show-line="true" :show-icon="true" :tree-data=treeData>
         <template #iconCustom="{title}">
           <div class="tree-node">
-            <img src="@/assets/image/common/iconTreeFolder.png" class="tree-node-icon" />
+            <img src="@/assets/image/common/iconTreeFolder.png" class="tree-node-icon" alt="" />
             <a-tooltip>
               <template #title>
                 {{ title }}
@@ -27,13 +26,15 @@
               <span class="tree-node-custom-title">{{ title }}</span>
             </a-tooltip>
             <template v-if="key === mouseInNodeKey">
-              <a-button icon="plus" class="tree-operate-node-btn">
-              </a-button>
+              <!--              新增-->
+              <a-button icon="plus" class="tree-operate-node-btn"></a-button>
+              <!--              编辑-->
               <a-button class="tree-operate-node-btn">
-                <img src="@/assets/image/common/iconTreeEdit.png" />
+                <img src="@/assets/image/common/iconTreeEdit.png" alt="" />
               </a-button>
+              <!--              删除-->
               <a-button class="tree-operate-node-btn">
-                <img src="@/assets/image/common/iconTreeDelete.png" />
+                <img src="@/assets/image/common/iconTreeDelete.png" alt="" />
               </a-button>
             </template>
           </div>
@@ -42,7 +43,11 @@
     </div>
     <div class="page-right-box">
       <div class="table-page-search-wrapper">
-        <search ref="searchRef" :flag="flag" :url="url" @search="searchQuery" @reset="searchReset" />
+        <search ref="searchRef"
+                :url="url"
+                :get-query-condition-func="getQueryConditionFunc"
+                @search="searchQuery"
+                @reset="searchReset" />
       </div>
 
       <div class="table-operator">
@@ -82,7 +87,7 @@
           @change="tableOnChange">
 
           <template v-slot:operation="{text, record}">
-            <a>{{$t('standardRegulationLibrary.domesticStandard.collection')}}</a>
+            <a>{{ $t('standardRegulationLibrary.domesticStandard.collection') }}</a>
             <a-divider type="vertical" />
             <a-dropdown>
               <a-icon type="more" class="operate-icon-btn" />
@@ -90,12 +95,10 @@
                 <a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
                   <a @click="operationClick(operation,record)">
                   <span v-if="operation.text === $t('docLibrary.cancelCollection')" class="text">
-                    {{ !record.collectFlag || record.collectFlag === '0' ? $t('docLibrary.collection') : $t('docLibrary.cancelCollection')
-                    }}
+                    {{ !record.collectFlag || record.collectFlag === '0' ? $t('docLibrary.collection') : $t('docLibrary.cancelCollection') }}
                   </span>
                     <span v-else-if="operation.text === $t('docLibrary.cancelSubscribe')" class="text">
-                    {{ !record.subscribeFlag || record.subscribeFlag === '0' ? $t('docLibrary.subscribe') : $t('docLibrary.cancelSubscribe')
-                      }}
+                    {{ !record.subscribeFlag || record.subscribeFlag === '0' ? $t('docLibrary.subscribe') : $t('docLibrary.cancelSubscribe') }}
                   </span>
                     <span v-else class="text">
                     {{ operation.text }}
@@ -108,14 +111,19 @@
         </j-table>
       </div>
     </div>
+
+    <!--    新增、编辑-->
+    <domestic-standard-modal ref="modalForm" @ok="modalFormOk" />
   </a-card>
 </template>
 
 <script>
 import '@assets/less/common.less'
-import { ConfigurableTableMixin } from '@/mixins/ConfigurableTableMixin'
-import Search from '@comp/customField/Search.vue'
-import JTable from '@comp/jero/JTable.vue'
+import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin'
+import Search from '../../../components/customField/Search.vue'
+import JTable from '../../../components/jero/JTable.vue'
+import DomesticStandardModal from './modules/DomesticStandardModal.vue'
+import { getDomesticStandardTableHeader, getDomesticStandardSearchForm } from '../../../api/standardRegulationLibraryApi'
 
 const apiTreeData = [
   {
@@ -142,7 +150,7 @@ const apiTreeData = [
 
 export default {
   name: 'DomesticStandardList',
-  components: { Search, JTable },
+  components: { Search, JTable, DomesticStandardModal },
   mixins: [ConfigurableTableMixin],
   data () {
     return {
@@ -173,14 +181,12 @@ export default {
           has: ''
         }
       ],
+      getTableHeaderFunc: getDomesticStandardTableHeader,
+      getQueryConditionFunc: getDomesticStandardSearchForm,
       url: {
-        tableHeader: '/laws/standard/domestic/getCommonHeader',
-        getSearchList: '/laws/standard/domestic/getQueryCondition',
         list: '/laws/standard/domestic/getCommonPage',
-        delete: '/laws/standard/domestic/deleteByIdsAndModule',
-        deleteBatch: '/laws/standard/domestic/deleteByIdsAndModule'
-      },
-      dataSource: [{ id: '131234' }]
+        delete: '/laws/standard/domestic/deleteByIdsAndModule'
+      }
     }
   },
   created () {
@@ -189,7 +195,6 @@ export default {
   methods: {
     initTreeData () {
       this.treeData = this.dealTreeData(apiTreeData)
-      console.log(this.treeData)
     },
     dealTreeData (treeData) {
       return treeData.map(item => {
@@ -212,6 +217,13 @@ export default {
       if (this.mouseInNodeKey === key) {
         this.mouseInNodeKey = null
       }
+    },
+    operationClick (operation, record) {
+      if (operation.clickEvent === 'handleDelete') {
+        this.handleDelete(record.id)
+      } else {
+        this[operation.clickEvent](record)
+      }
     }
   }
 }

src/views/standardRegulationLibrary/domesticStandard/modules/DomesticStandardModal.vue

@@ -11,7 +11,10 @@
   >
     <a-spin :spinning="confirmLoading" style="width: 100%;height:100%">
       <div class="drawer-container">
-
+        <add-form ref="addForm"
+                  :get-form-func="getFormFunc"
+                  :get-document-info-func="getDocumentInfoFunc"
+                  @submitFormData="submitFormData" />
       </div>
       <div class="drawer-footer">
         <a-button @click="handleOk" type="primary" style="margin-bottom: 0;">
@@ -24,8 +27,13 @@
 </template>
 
 <script>
+import AddForm from '../../../../components/customField/AddForm.vue'
+import { postAction } from '@api/manage'
+import { getDomesticStandardDocumentInfo, getDomesticStandardFormModal } from '../../../../api/standardRegulationLibraryApi'
+
 export default {
   name: 'DomesticStandardModal',
+  components: { AddForm },
   data () {
     return {
       visible: false,
@@ -33,16 +41,57 @@ export default {
       width: 800,
       // 存储表单的数据
       form: {},
-      confirmLoading: false
+      confirmLoading: false,
+      getFormFunc: getDomesticStandardFormModal,
+      getDocumentInfoFunc: getDomesticStandardDocumentInfo,
+      url: {
+        getAddForm: '/laws/standard/domestic/getFormModel',
+        getDocumentInfo: '/laws/standard/domestic/getByIdAndModule',
+        add: '/laws/standard/domestic/commonAdd',
+        edit: '/laws/standard/domestic/commonEdit'
+      }
     }
   },
   methods: {
     add () {
-      this.edit({})
+      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
     }

src/views/standardRegulationLibrary/overseasStandard/OverseasStandardList.vue

@@ -0,0 +1,266 @@
+<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('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder')"
+                      @search="handleTableSearch" />
+      <a-tree :show-line="true" :show-icon="true" :tree-data=treeData>
+        <template #iconCustom="{title}">
+          <div class="tree-node">
+            <img src="@/assets/image/common/iconTreeFolder.png" class="tree-node-icon" alt="" />
+            <a-tooltip>
+              <template #title>
+                {{ title }}
+              </template>
+              <span class="tree-node-title">{{ title }}</span>
+            </a-tooltip>
+          </div>
+        </template>
+
+        <template #custom="{title, key}">
+          <div class="tree-operate-node" @mouseenter="handleTreeMouseover(key)" @mouseleave="handleTreeMouseout(key)">
+            <a-tooltip>
+              <template #title>
+                {{ title }}
+              </template>
+              <span class="tree-node-custom-title">{{ title }}</span>
+            </a-tooltip>
+            <template v-if="key === mouseInNodeKey">
+              <!--              新增-->
+              <a-button icon="plus" class="tree-operate-node-btn"></a-button>
+              <!--              编辑-->
+              <a-button class="tree-operate-node-btn">
+                <img src="@/assets/image/common/iconTreeEdit.png" alt="" />
+              </a-button>
+              <!--              删除-->
+              <a-button class="tree-operate-node-btn">
+                <img src="@/assets/image/common/iconTreeDelete.png" alt="" />
+              </a-button>
+            </template>
+          </div>
+        </template>
+      </a-tree>
+    </div>
+    <div class="page-right-box">
+      <div class="table-page-search-wrapper">
+        <search ref="searchRef" :url="url" :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 type="primary" icon="download" ghost>{{ $t('import') }}</a-button>
+        </a-upload>
+        <!--        导出-->
+        <a-button icon="upload" type="primary" ghost @click="handleExportXls($t('standardRegulationLibrary.domesticStandard.treeSearchPlaceholder'))">
+          {{ $t('export') }}
+        </a-button>
+        <!--        带文件导出-->
+        <a-button icon="upload" type="primary" ghost>{{ $t('exportWithFile') }}</a-button>
+        <!--        模板下载-->
+        <a-button type="primary" icon="download" ghost @click="downTemplate('standardRegulationLibrary.domesticStandard.templateName')">
+          {{ $t('templateDownload') }}
+        </a-button>
+        <!--        批量删除-->
+        <a-button type="primary" icon="delete" ghost @click="batchDel">{{ $t('batchDelete') }}</a-button>
+        <!--        配置标准-->
+        <a-button type="primary" icon="setting" ghost>{{ $t('standardRegulationLibrary.configStandard') }}</a-button>
+        <!--        移出标准-->
+        <a-button type="primary" icon="minus-circle" ghost>{{ $t('standardRegulationLibrary.removeStandard') }}</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 v-slot:operation="{text, record}">
+            <a>{{ $t('standardRegulationLibrary.domesticStandard.collection') }}</a>
+            <a-divider type="vertical" />
+            <a-dropdown>
+              <a-icon type="more" class="operate-icon-btn" />
+              <a-menu slot="overlay">
+                <a-menu-item v-for="(operation, index) in operationList.slice(operateMaxNum)" :key="index">
+                  <a @click="operationClick(operation,record)">
+                  <span v-if="operation.text === $t('docLibrary.cancelCollection')" class="text">
+                    {{ !record.collectFlag || record.collectFlag === '0' ? $t('docLibrary.collection') : $t('docLibrary.cancelCollection') }}
+                  </span>
+                    <span v-else-if="operation.text === $t('docLibrary.cancelSubscribe')" class="text">
+                    {{ !record.subscribeFlag || record.subscribeFlag === '0' ? $t('docLibrary.subscribe') : $t('docLibrary.cancelSubscribe') }}
+                  </span>
+                    <span v-else class="text">
+                    {{ operation.text }}
+                  </span>
+                  </a>
+                </a-menu-item>
+              </a-menu>
+            </a-dropdown>
+          </template>
+        </j-table>
+      </div>
+    </div>
+
+    <!--    新增、编辑-->
+    <overseas-standard-modal ref="modalForm" @ok="modalFormOk" />
+  </a-card>
+</template>
+
+<script>
+import '@assets/less/common.less'
+import JTable from '../../../components/jero/JTable.vue'
+import Search from '../../../components/customField/Search.vue'
+import { ConfigurableTableMixin } from '../../../mixins/ConfigurableTableMixin'
+import OverseasStandardModal from './modules/OverseasStandardModal.vue'
+
+const apiTreeData = [
+  {
+    title: 'parent 1',
+    key: '0-0',
+    child: [
+      {
+        title: '张晨成',
+        key: '0-0-0',
+        disabled: true,
+        child: [
+          { title: 'leaf', key: '0-0-0-0' },
+          { title: 'leaf', key: '0-0-0-1' }
+        ]
+      },
+      {
+        title: 'parent 1-1',
+        key: '0-0-1',
+        child: [{ key: '0-0-1-0', title: 'zcvc' }]
+      }
+    ]
+  }
+]
+
+export default {
+  name: 'OverseasStandardList',
+  components: { JTable, Search, OverseasStandardModal },
+  mixins: [ConfigurableTableMixin],
+  data () {
+    return {
+      treeInput: null, // 树查询绑定值
+      treeData: [],
+      mouseInNodeKey: null, // 鼠标悬浮的节点key值
+      showAction: true,
+      operationList: [
+        // 收藏
+        {
+          text: this.$t('standardRegulationLibrary.domesticStandard.cancelCollection'),
+          clickEvent: 'collection',
+          has: ''
+        },
+        {
+          text: this.$t('edit'),
+          clickEvent: 'handleEdit',
+          has: ''
+        },
+        {
+          text: this.$t('share'),
+          clickEvent: 'handleShare',
+          has: ''
+        },
+        {
+          text: this.$t('delete'),
+          clickEvent: 'handleDelete',
+          has: ''
+        }
+      ],
+      url: {
+        tableHeader: '/laws/standard/overseas/getCommonHeader',
+        getSearchList: '/laws/standard/overseas/getQueryCondition',
+        list: '/laws/standard/overseas/getCommonHeader',
+        delete: '/laws/standard/overseas/deleteByIdsAndModule'
+      }
+    }
+  },
+  created () {
+    this.initTreeData()
+  },
+  methods: {
+    initTreeData () {
+      this.treeData = this.dealTreeData(apiTreeData)
+    },
+    dealTreeData (treeData) {
+      return treeData.map(item => {
+        if (item.child && item.child.length > 0) {
+          item.scopedSlots = { title: 'iconCustom' }
+          item.children = this.dealTreeData(item.child)
+        } else {
+          item.scopedSlots = { title: 'custom' }
+        }
+        return item
+      })
+    },
+    handleTableSearch () {
+
+    },
+    handleTreeMouseover (key) {
+      this.mouseInNodeKey = key
+    },
+    handleTreeMouseout (key) {
+      if (this.mouseInNodeKey === key) {
+        this.mouseInNodeKey = null
+      }
+    },
+    operationClick (operation, record) {
+      if (operation.clickEvent === 'handleDelete') {
+        this.handleDelete(record.id)
+      } else {
+        this[operation.clickEvent](record)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+/deeo/ .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>

src/views/standardRegulationLibrary/overseasStandard/modules/OverseasStandardModal.vue

@@ -0,0 +1,98 @@
+<template>
+  <a-drawer
+    :title="title"
+    :width="width"
+    placement="right"
+    :closable="true"
+    @close="handleCancel"
+    :visible="visible"
+    :maskClosable="false"
+    style="height: 100%;overflow: auto;"
+  >
+    <a-spin :spinning="confirmLoading" style="width: 100%;height:100%">
+      <div class="drawer-container">
+        <add-form ref="addForm" :url="url" @submitFormData="submitFormData"></add-form>
+      </div>
+      <div class="drawer-footer">
+        <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 AddForm from '../../../../components/customField/AddForm.vue'
+import { postAction } from '../../../../api/manage'
+
+export default {
+  name: 'OverseasStandardModal',
+  components: { AddForm },
+  data () {
+    return {
+      visible: false,
+      title: '',
+      width: 800,
+      // 存储表单的数据
+      form: {},
+      confirmLoading: false,
+      url: {
+        getAddForm: '/laws/standard/overseas/getFormModel',
+        getDocumentInfo: '/laws/standard/overseas/getByIdAndModule',
+        add: '/laws/standard/overseas/commonAdd',
+        edit: '/laws/standard/overseas/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>