@epxing/business 0.0.0-stage → 5.3.0-beta.2

package/src/components/CodeManage.vue

@@ -0,0 +1,1004 @@
+<template>
+  <div class="code-manage">
+    <!-- 代码列表 -->
+    <el-card class="card code" shadow="never">
+      <template v-slot:header><div class="card-header">
+        <span>代码标准（{{total}}）</span>
+        <el-dropdown class="fr">
+          <i class="el-icon-more" :style="{fontSize: '20px', cursor: 'pointer'}"></i>
+          <template v-slot:dropdown><el-dropdown-menu>
+            <el-dropdown-item @click="addEntity">+ 创建</el-dropdown-item>
+            <el-dropdown-item @click="importCode('define')">导入代码定义表</el-dropdown-item>
+            <el-dropdown-item @click="importCode('code')">导入代码项</el-dropdown-item>
+            <el-dropdown-item @click="copyCode">复制代码定义表</el-dropdown-item>
+            <el-dropdown-item @click="selectAllCode">全选</el-dropdown-item>
+          </el-dropdown-menu></template>
+        </el-dropdown>
+        <!-- <el-button class="fr" type="primary" link @click="addEntity">+ 创建</el-button> -->
+      </div></template>
+      <div class="code-conatiner">
+        <div class="code-search">
+          <epx-search-filter :fields="$configs.searchFields" :keywords="$configs.keywords" @search="search" @search-keyword="v=>searchKeyParams=v"></epx-search-filter>
+        </div>
+        <div class="code-batch-bar" v-if="selectedCodeIds.length > 0">
+          <span class="code-batch-bar__count">已选 {{selectedCodeIds.length}} 项</span>
+          <el-button size="small" type="primary" @click="batchExportCode">导出代码定义表</el-button>
+          <el-button size="small" @click="selectedCodeIds=[]">取消</el-button>
+        </div>
+      <draggable
+        class="code-list"
+        :list="codeList"
+        ghost-class="ghost"
+        filter=".code-item__sort--disable"
+        @sort="sortFn"
+      >
+        <transition-group type="transition"  v-infinite-scroll="getData" class="code-list__inner" >
+          <li v-for="codeItem in codeList" :key="codeItem.ID" :class="['code-item',{active: selectCodeItem && selectCodeItem.ID===codeItem.ID}, {'code-item__sort--disable': (codeItem['SCOPE']==='frame' && $configs.scope!=='frame') || (codeItem['SCOPE']==='client'&&$configs.scope!=='client')}]" @click="viewCode(codeItem)">
+            <el-checkbox
+              :value="selectedCodeIds.includes(codeItem.ID)"
+              @change="toggleSelectCode(codeItem.ID)"
+              @click.stop
+              class="code-item__checkbox"
+            ></el-checkbox>
+            <span class="code-item__name">
+              {{ codeItem.NAME}}
+              <el-tag v-if="codeItem['SCOPE']==='frame' && $configs.scope!=='frame'" :style="{marginLeft:'8px'}" size="small">国标</el-tag>
+              <el-tag v-if="codeItem['SCOPE']==='client' && $configs.scope!=='client'" :style="{marginLeft:'8px'}" size="small">平台</el-tag>
+            </span>
+            <el-popconfirm
+              title="确认删除该代码表？"
+              @confirm="deleteCode(codeItem)"
+            >
+              <template v-slot:reference><el-button v-if="codeItem.SCOPE==='system' || codeItem.MANAGE_SYSTEM===SYSTEM || codeItem.SYSTEM===SYSTEM || ($configs.scope==='frame' && codeItem.SCOPE==='frame' ) || (codeItem.SCOPE==='client' && $configs.scope==='client' )" class="delete-code" type="primary" link>删除</el-button></template>
+            </el-popconfirm>
+          </li>
+          </transition-group>
+        </draggable>
+      </div>
+    </el-card>
+    <epx-page class="add-page" v-if="addPage" component="entity-add-page" :pageId="$configs.addPageId" :metaId="$metaId" :current-query="{pageType: 'ADD',submitBackPage:false, callback: addCodeCallback}" ></epx-page>
+    <template v-else-if="selectCodeItem">
+      <el-tabs class="tabs" v-model="activeTab"  type="card">
+        <el-tab-pane :label="`代码选项（${codeOptionsTree.length}）`" name="option">
+          <div class="code-options-container">
+            <div class="operate">
+              <el-input type="text" v-model="optionKey" size="default" suffix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
+              <div>
+                <template  v-if="selectCodeItem.SCOPE==='system' || selectCodeItem.MANAGE_SYSTEM===SYSTEM || ($configs.scope==='frame' && selectCodeItem.SCOPE==='frame' ) || (selectCodeItem.SCOPE==='client' && $configs.scope==='client' )">
+                  <el-button size="default" type="primary" @click="addCodeOption(null)">添加</el-button>
+                  <el-button size="default" type="primary" @click="importCurrentCode">导入代码项</el-button>
+                </template>
+                <el-button size="default" type="primary" @click="exportCurrentCode">导出代码项</el-button>
+                <el-button  v-if="selectCodeItem.SCOPE==='system' || selectCodeItem.MANAGE_SYSTEM===SYSTEM || ($configs.scope==='frame' && selectCodeItem.SCOPE==='frame' ) || (selectCodeItem.SCOPE==='client' && $configs.scope==='client' )" size="default" type="primary" :disabled="checkedKeys.length===0" @click="batchDeleteCodeOption">批量删除</el-button>
+              </div>
+            </div>
+            <el-tree
+              ref="tree"
+              class="code-tree"
+              :data="codeOptionsTree"
+              node-key="id"
+              show-checkbox
+              :filter-node-method="filterNode"
+              :default-expanded-keys="expandKeys"
+              @node-expand="expandNode"
+              @node-collapse="collapseNode"
+              @node-drop="dropCodeOption"
+              @check="onTreeCheck"
+              draggable
+            >
+              <template v-slot="{data}">
+                <div class="code-option">
+                  <span>{{`${data.title}（${data.code}）`}}</span>
+                  <span v-if="selectCodeItem.SCOPE==='system' || selectCodeItem.MANAGE_SYSTEM===SYSTEM || ($configs.scope==='frame' && selectCodeItem.SCOPE==='frame' ) || (selectCodeItem.SCOPE==='client' && $configs.scope==='client' )">
+                    <i class="add-option-level" @click="editCodeOption(data)">编辑</i>
+                    <i class="add-option-level" @click="addCodeOption(data)">添加下级</i>
+                    <el-popconfirm
+                      title="确认删除该代码表？"
+                      @confirm="deleteCodeOption(data)"
+                    >
+                      <template v-slot:reference><i class="remove-option">删除</i></template>
+                    </el-popconfirm>
+                  </span>
+                </div>
+              </template>
+            </el-tree>
+          </div>
+        </el-tab-pane>
+        <el-tab-pane label="代码定义" name="define">
+           <div class="code-from">
+             <div class="operate">
+              <span></span>
+              <div>
+                <el-button v-if="editable===false && (selectCodeItem.SCOPE==='system' || selectCodeItem.MANAGE_SYSTEM===SYSTEM || ($configs.scope==='frame' && selectCodeItem.SCOPE==='frame' ) || (selectCodeItem.SCOPE==='client' && $configs.scope==='client'))" size="default" type="primary" @click="editCode">编辑</el-button>
+                <el-button v-if="editable===false && selectCodeItem.MANAGE_SYSTEM===SYSTEM && selectCodeItem.SCOPE==='system' " size="default" type="primary" @click="shareCode">共享</el-button>
+              </div>
+            </div>
+            <epx-add-form-item
+              v-if="loadForm"
+              ref="formItem"
+              :formData="selectCodeItem"
+              :edit="editable"
+              :comp-configs="formConfigs"
+              :form="this"
+              @cancel-edit="editable=false"
+              ></epx-add-form-item>
+          </div>
+        </el-tab-pane>
+      </el-tabs>
+      <!-- <el-card class="card code-detail">
+        <div slot="header" class="card-header">
+          <span>{{selectCodeItem.NAME}}-代码定义</span>
+          <el-button class="fr" type="primary" link @click="editCode">
+            <i class="el-icon-edit-outline"></i>
+              编辑
+          </el-button>
+        </div>
+        <div class="code-from">
+          <epx-add-form-item
+            v-if="loadForm"
+            :formData="selectCodeItem"
+            :formConfigs="{pageType: editable? 'EDIT':'DETAIL'}"
+            :comp-configs="{...$configs, editable: true}"
+            :form="this"
+            ></epx-add-form-item>
+        </div>
+      </el-card> -->
+       <!-- <el-card class="card code-options">
+        <div slot="header" class="card-header">
+          <span>{{selectCodeItem.NAME}}-代码选项</span>
+          <el-button class="fr" type="primary" link @click="addCodeOptionVisible=true;upCodeOption=null">
+              + 添加
+          </el-button>
+        </div>
+        <div class="code-options-container">
+          <el-input type="text" v-model="optionKey" size="default" suffix-icon="el-icon-search" placeholder="请输入搜索内容"></el-input>
+          <el-tree
+            ref="tree"
+            class="code-tree"
+            :data="codeOptionsTree"
+            node-key="id"
+            :filter-node-method="filterNode"
+            @node-drop="dropCodeOption"
+            draggable
+          >
+            <template v-slot="{data}">
+              <div class="code-option">
+                <span>{{`${data.title}（${data.code}）`}}</span>
+                <span>
+                  <i class="add-option-level" @click="editCodeOption(data)">编辑</i>
+                  <i class="add-option-level" @click="addCodeOption(data)">添加下级</i>
+                  <el-popconfirm
+                    title="确认删除该代码表？"
+                    @confirm="deleteCodeOption(data)"
+                  >
+                    <i slot="reference" class="remove-option">删除</i>
+                  </el-popconfirm>
+                </span>
+              </div>
+            </template>
+          </el-tree>
+        </div>
+       </el-card> -->
+    </template>
+    <el-dialog
+      title="代码项新增"
+      v-model="addCodeOptionVisible"
+      destroy-on-close
+      width="700px"
+    >
+      <div>
+        <p v-if="upCodeOption" class="code-option-form__item">
+          <label for="">上级代码：</label>
+          <span>{{upCodeOption.title}}</span>
+        </p>
+        <p class="code-option-form__item">
+          <label for="">编号：</label>
+          <el-input v-model="option.CODE"  type="text" placeholder="请输入编号"></el-input>
+        </p>
+         <p class="code-option-form__item">
+          <label for="">名称：</label>
+          <epx-input class="code-option-form__input" v-model="option.NAME" :i18nValue="option.LANGUAGE_PARAM && option.LANGUAGE_PARAM.NAME" @change-language="v=>(option['LANGUAGE_PARAM'] = {...(option.LANGUAGE_PARAM || {}), NAME: v})" :fieldConfigs="{attriName: 'NAME', state: 'EDIT', attriLabel: '名称', attribute: {international: '1'}}"></epx-input>
+        </p>
+        <p class="code-option-form__item">
+          <label for="">图标：</label>
+          <epx-object v-model="option.ICON" :fieldConfigs="{attriName: 'ICON', state: 'EDIT', attriLabel: '图标', dataType: 'object', codeKey: 'FM_FONT_ICON'}"></epx-object>
+        </p>
+        <div class="code-option-form__item">
+          <label for="">颜色：</label>
+          <el-color-picker v-model="option.FONT_COLOR" show-alpha :predefine="colorList"></el-color-picker>
+        </div>
+        <div class="code-option-form__item">
+          <label for="">背景色：</label>
+          <el-color-picker v-model="option.ICON_BG_COLOR" show-alpha :predefine="colorList"></el-color-picker>
+        </div>
+        <p class="code-option-form__item">
+          <label for="">是否启用：</label>
+          <epx-radio v-model="option.ENABLE" :fieldConfigs="{attriName: 'ENABLE', state: 'EDIT', attriLabel: '是否启用', dataType: 'radio', codeKey: 'FRAME_PUB_BOOLEAN'}"></epx-radio>
+        </p>
+      </div>
+      <div  class="dialog-footer">
+        <el-button @click="addCodeOptionVisible = false;upCodeOption= null">取 消</el-button>
+        <el-button type="primary" @click="saveCodeOption">确 定</el-button>
+        <el-button type="primary" @click="saveCodeOption(true)">确定并继续</el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { mapGetters } from 'vuex'
+import { evalWith } from '@epxing/utils/src/eval-with'
+import component from '@epxing/core/src/mixins/component'
+import draggable from '@epxing/core/src/components/draggable'
+export default {
+  name: 'epx-code-manage',
+  mixins: [component],
+  flex: true,
+  pageFlag: true,
+  components: {
+    draggable
+  },
+  data () {
+    return {
+      codeList: [],
+      currentPage: 1,
+      pageSize: 20,
+      expandKeys: [],
+      searchKeyParams: [],
+      searchParams: [],
+      loadFinish: false,
+      selectCodeItem: null,
+      editable: false,
+      loadForm: true,
+      codeOptionsTree: [],
+      addCodeOptionVisible: false,
+      upCodeOption: null,
+      option: {},
+      optionKey: '',
+      addPage: false,
+      total: 0,
+      activeTab: 'option',
+      checkedKeys: [],
+      selectedCodeIds: [],
+      colorList: ['#FFFFFF', '#F2F3F7', '#E2F4FD', '#EEFAE1', '#F7E9BC', '#FBD3D0', '#C2CDF0', '#DBCEF5', '#E8D5CB', '#C0EBE5', '#E48484', '#DFB85D', '#B1C774', '#77C386', '#6EC4C4', '#69B1E4', '#6F81DB', '#A287E1', '#75636A', '#7C9CC0']
+    }
+  },
+  computed: {
+    ...mapGetters([
+      'getMetaById'
+    ]),
+    scopeParams () {
+      const { scopeParams: configScopeParams = [] } = this.$configs
+      const { scopeParams: queryScopeParams = [] } = this.$query
+      const scopeParams = [...configScopeParams, ...queryScopeParams]
+      // 格式化scopeParams
+      const _scopeParams = this.$_.cloneDeep([...scopeParams, ...this.searchParams])
+      const that = this
+      for (const scopeKey in _scopeParams) {
+        const scope = _scopeParams[scopeKey]
+        if (!scope) continue
+        let values = scope.values
+        if (/\$\[(.+)\]/.test(values)) {
+          values = values.replace(/\$\[(.+)\]/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || evalWith(`that.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        if (/#\{(.+)\}/.test(values)) {
+          values = values.replace(/#\{(.+)\}/, (match, key) => {
+            try {
+              return evalWith(`that.$query.${key}`, { that }) || evalWith(`that.$tab.${key}`, { that }) || ''
+            } catch (error) {
+              return scope.values
+            }
+          })
+        }
+        scope.values = values
+      }
+      return _scopeParams
+    },
+    formConfigs () {
+      return { ...this.$configs, editable: true }
+    }
+  },
+  watch: {
+    searchKeyParams () {
+      if (this.initData) {
+        this.selectCodeItem = null
+        this.$refesh()
+      }
+    },
+    scopeParams: {
+      deep: true,
+      handler () {
+        if (this.initData) {
+          this.selectCodeItem = null
+          this.$refesh()
+        }
+      }
+    },
+    optionKey (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  methods: {
+    getData (current) {
+      if (this.loadFinish) return
+      if (this.loading) return
+      this.loading = true
+      // eslint-disable-next-line camelcase
+      let { queryParams = {}, pageFlag, orderFields, order_field: orderField = [], order_mode: orderMode = [] } = this.$configs
+      if (orderFields && orderFields.length > 0) {
+        orderField = orderFields.map(item => item.attriName || item)
+        orderMode = orderFields.map(item => item.sort || 'asc')
+      }
+      const params = {
+        entityId: this.$metaId,
+        link: 'system',
+        ...this.$formatParams(queryParams),
+        ...this.searchKeyParams,
+        order_field: orderField.join(','),
+        order_mode: orderMode.join(','),
+        columnFieldNames: this.$meta.getListFields().join('#,') + '#,SYSTEM|CODE,SYSTEM|NAME'
+      }
+      if (pageFlag) {
+        params.page = current || this.currentPage
+        params.limit = this.pageSize
+      }
+      if (this.scopeParams.length > 0) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      this.currentPage = params.page + 1
+      this.$http.list(params)
+        .then(data => {
+          this.initData = true
+          this.loading = false
+          this.total = data.total
+          this.codeList = [...this.codeList, ...data.entitys]
+          if (data.entitys.length < this.pageSize) {
+            this.loadFinish = true
+          }
+        })
+        .catch(() => {
+          this.loading = false
+        })
+    },
+    addEntity () {
+      this.addPage = true
+      // const { addPageId } = this.$configs
+      // this.$createPage({
+      //   component: 'entity-add-page',
+      //   metaId: this.$metaId,
+      //   pageType: 'ADD',
+      //   pageId: addPageId
+      // })
+    },
+    importCode (key) {
+      this.$createPage({
+        component: 'import-page',
+        metaId: key === 'define' ? 'FM_CODE_DEFINE' : 'FM_CODE_PUB',
+        dynamicParams: {
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM
+        }
+      })
+    },
+    exportCode () {
+      const params = {}
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      this.$createPage({
+        metaId: this.$metaId,
+        component: 'export-page',
+        flag: 'v_export',
+        selects: this.selectCodeItem.ID,
+        selectIds: [this.selectCodeItem.ID],
+        total: this.total,
+        params,
+        fields: this.$meta.getExportFields()
+      })
+    },
+    toggleSelectCode (id) {
+      const index = this.selectedCodeIds.indexOf(id)
+      if (index === -1) {
+        this.selectedCodeIds.push(id)
+      } else {
+        this.selectedCodeIds.splice(index, 1)
+      }
+    },
+    selectAllCode () {
+      if (this.selectedCodeIds.length === this.codeList.length) {
+        this.selectedCodeIds = []
+      } else {
+        this.selectedCodeIds = this.codeList.map(item => item.ID)
+      }
+    },
+    batchExportCode () {
+      const params = {}
+      if (this.scopeParams) {
+        params.scopeParams = JSON.stringify(this.scopeParams)
+      }
+      this.$createPage({
+        metaId: this.$metaId,
+        component: 'export-page',
+        flag: 'v_export',
+        selects: this.selectedCodeIds.join(','),
+        selectIds: [...this.selectedCodeIds],
+        total: this.total,
+        params,
+        fields: this.$meta.getExportFields()
+      })
+    },
+    copyCode () {
+      const { copyPageId } = this.$configs
+      if (!this.selectCodeItem) {
+        this.$message.error('请先选中要复制的代码定义表')
+        return
+      }
+      this.$createPage({
+        openType: '2',
+        component: 'entity-add-page',
+        metaId: this.$metaId,
+        pageType: 'ADD',
+        id: this.selectCodeItem.ID,
+        pageId: copyPageId
+      })
+    },
+    deleteCode (item) {
+      this.$http.removeMulti({
+        entityId: this.$metaId,
+        ids: item.ID
+      })
+        .then(() => {
+          this.selectCodeItem = null
+          this.$refesh()
+          if (item.ID === this.selectCodeItem.ID) this.selectCodeItem = null
+        })
+    },
+    viewCode (codeItem) {
+      this.selectCodeItem = codeItem
+      this.getCodeOptions()
+      this.cancelEdit()
+    },
+    editCode () {
+      this.editable = true
+      this.loadForm = false
+      this.$nextTick(() => {
+        this.loadForm = true
+      })
+    },
+    shareCode () {
+      this.$http.update({
+        entityId: 'FM_CODE_DEFINE',
+        'bean.ID': this.selectCodeItem.ID,
+        'bean.SCOPE': 'frame'
+      })
+        .then(data => {
+          this.selectCodeItem = { ...this.selectCodeItem, SCOPE: 'client' }
+          const index = this.codeList.findIndex(item => item.ID === this.selectCodeItem.ID)
+          if (index !== -1) {
+            this.codeList.splice(index, 1, { ...this.selectCodeItem, SCOPE: 'client' })
+          }
+        })
+    },
+    getCodeOptions () {
+      this.$http.getTree({
+        entityId: 'FM_CODE_DEFINE',
+        key: this.selectCodeItem.ID,
+        useCache: '0',
+        mysort: 'ORDER_NUM',
+        dir: 'ASC',
+        scope: 'all'
+      })
+        .then(data => {
+          this.codeOptionsTree = data
+          this.checkedKeys = []
+        })
+    },
+    cancelEdit (finish) {
+      this.editable = false
+      this.loadForm = false
+      this.$nextTick(() => {
+        this.loadForm = true
+      })
+      if (finish) {
+        // 获取代码详细信息，修改
+        this.$http.get({
+          entityId: this.$metaId,
+          id: this.selectCodeItem.ID
+        })
+          .then(data => {
+            this.selectCodeItem = data.data
+            const index = this.codeList.findIndex(item => item.ID === this.selectCodeItem.ID)
+            if (index !== -1) {
+              this.codeList.splice(index, 1, data.data)
+            }
+          })
+      }
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.title.indexOf(value) !== -1
+    },
+    expandNode (node) {
+      this.expandKeys = [...new Set([...this.expandKeys, node.id])]
+    },
+    collapseNode (node) {
+      const index = this.expandKeys.findIndex(item => item === node.id)
+      if (index !== -1) {
+        this.expandKeys.splice(index, 1)
+      }
+    },
+    addCodeOption (data) {
+      this.addCodeOptionVisible = true
+      this.upCodeOption = data
+      this.option = {
+        ENABLE: '1'
+      }
+    },
+    editCodeOption (data) {
+      this.addCodeOptionVisible = true
+      this.$http.get({
+        entityId: 'FM_CODE_PUB',
+        id: data.id
+      })
+        .then(data => {
+          this.option = { LANGUAGE_PARAM: {}, ...data.data }
+        })
+    },
+    saveCodeOption (isContinue) {
+      if (!this.option.CODE || !this.option.NAME) {
+        this.$message.error('请输入代码项信息')
+        return
+      }
+      const params = {
+        'bean.CLIENT': this.$tab.CLIENT,
+        'bean.SYSTEM': this.$tab.SYSTEM,
+        'bean.CODE': this.option.CODE,
+        'bean.CODE_DEFINE': this.selectCodeItem.ID,
+        'bean.NAME': this.option.NAME,
+        'bean.ICON': this.option.ICON && typeof this.option.ICON === 'object' ? this.option.ICON.id : this.option.ICON,
+        'bean.ICON_COLOR': this.option.ICON_COLOR,
+        'bean.ICON_BG_COLOR': this.option.ICON_BG_COLOR,
+        'bean.FONT_COLOR': this.option.FONT_COLOR,
+        'bean.LANGUAGE_PARAM': this.option.LANGUAGE_PARAM,
+        'bean.ENABLE': this.option.ENABLE
+      }
+      if (this.selectCodeItem.SCOPE === 'client') {
+        delete params['bean.SYSTEM']
+      }
+      if (this.upCodeOption) {
+        params['bean.UP'] = this.upCodeOption.id
+      }
+      if (this.option.ID) {
+        params.action = 'update'
+        params['bean.ID'] = this.option.ID
+      }
+      if (this.isRequesting === true) return
+      this.isRequesting = true
+      this.$http.save({
+        entityId: 'FM_CODE_PUB',
+        ...params
+      })
+        .then(() => {
+          this.getCodeOptions()
+          this.option = {
+            NAME: '',
+            CODE: '',
+            ICON: '',
+            ICON_COLOR: '',
+            ICON_BG_COLOR: '',
+            FONT_COLOR: '',
+            ENABLE: '1',
+            LANGUAGE_PARAM: {}
+          }
+          if (isContinue !== true) {
+            this.upCodeOption = null
+            this.addCodeOptionVisible = false
+          }
+          this.isRequesting = false
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+          this.isRequesting = false
+        })
+    },
+    addCodeCallback (code) {
+      this.addPage = false
+      this.$http.get({
+        entityId: this.$metaId,
+        id: code.id
+      })
+        .then(data => {
+          this.viewCode(data.data)
+        })
+      this.currentPage = 1
+      this.codeList = []
+      this.loading = false
+      this.loadFinish = false
+      this.getData()
+    },
+    onTreeCheck () {
+      this.checkedKeys = this.$refs.tree.getCheckedKeys()
+    },
+    batchDeleteCodeOption () {
+      this.$confirm(`确认删除选中的 ${this.checkedKeys.length} 个代码项？`, '提示', {
+        confirmButtonText: '确定',
+        cancelButtonText: '取消',
+        type: 'warning'
+      }).then(() => {
+        this.$http.removeMulti({
+          entityId: 'FM_CODE_PUB',
+          ids: this.checkedKeys.join(',')
+        }).then(() => {
+          this.$message.success('删除成功')
+          this.getCodeOptions()
+        })
+      }).catch(() => {})
+    },
+    deleteCodeOption (item) {
+      this.$http.removeMulti({
+        entityId: 'FM_CODE_PUB',
+        ids: item.id
+      })
+        .then(() => {
+          this.getCodeOptions()
+        })
+    },
+    getCodeOptionNode (modules, parentId) {
+      let node = null
+      for (let i = 0; i < modules.length; i++) {
+        const module = modules[i]
+        if ((module.id) === parentId) {
+          node = module
+          return node
+        } else if (module.children && module.children.length > 0) {
+          node = this.getCodeOptionNode(module.children, parentId)
+        }
+        if (node) {
+          return node
+        }
+      }
+    },
+    dropCodeOption (node, current, type, event) {
+      // 获取当前节点结束后的父节点
+      let parentId = ''
+      let modules = []
+      if (type === 'after' || type === 'before') {
+        parentId = current.data.parent || 'root'
+        // 获取parent对应id
+      } else if (type === 'inner') {
+        parentId = current.data.id
+      }
+
+      if (parentId === 'root') {
+        modules = [...this.codeOptionsTree]
+      } else {
+        const parentNode = this.getCodeOptionNode(this.codeOptionsTree, parentId) || { children: [...this.codeOptionsTree] }
+        modules = [...parentNode.children]
+      }
+      // 获取其父节点的所有子节点
+      const str = modules.reduce((str, item, index) => (str += (item.id) + ':' + index + ','), '')
+      // 递归获取id为parentId的节点
+      this.$http.$post({
+        action: 'moveTree',
+        entityId: 'FM_CODE_PUB',
+        id: node.data.id,
+        selfAttriName: 'ID',
+        newParentId: parentId,
+        orderString: str,
+        orderAtrriName: 'ORDER_NUM'
+      })
+        .then(data => {
+          this.getCodeOptions()
+        })
+    },
+    search (v) {
+      this.searchParams = v
+    },
+    $refesh () {
+      if (this.selectCodeItem) {
+        // 获取当前一条数据
+        if (this.$refs.formItem && this.$refs.formItem.$refs.form) {
+          const { data = {} } = this.$refs.formItem.$refs.form.model || {}
+          const index = this.codeList.findIndex(item => item.ID === this.selectCodeItem.ID)
+          if (index !== -1) {
+            this.codeList.splice(index, 1, { ...this.codeList[index], ...data })
+          }
+        }
+      } else {
+        if (this.refeshTimer) return
+        this.refeshTimer = setTimeout(() => {
+          this.currentPage = 1
+          this.codeList = []
+          this.loading = false
+          this.loadFinish = false
+          this.getData()
+          clearTimeout(this.refeshTimer)
+          this.refeshTimer = null
+        }, 100)
+      }
+    },
+    importCurrentCode () {
+      this.$createPage({
+        metaId: 'FM_CODE_PUB',
+        component: 'import-page',
+        dynamicParams: {
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          CODE_DEFINE: this.selectCodeItem.ID
+        }
+      })
+    },
+    async exportCurrentCode () {
+      let meta = this.getMetaById('FM_CODE_PUB')
+      if (!meta) {
+        meta = await this.$store.dispatch({
+          type: 'ADD_META',
+          metaId: 'FM_CODE_PUB'
+        })
+      }
+      this.$createPage({
+        metaId: 'FM_CODE_PUB',
+        component: 'export-page',
+        fields: meta.getAllFieldConfigs(),
+        total: this.codeOptionsTree.length,
+        scopeParams: [
+          {
+            field: 'CLIENT',
+            values: this.CLIENT
+          },
+          {
+            field: 'CODE_DEFINE',
+            values: this.selectCodeItem.ID
+          }
+        ]
+        // dynamicParams: {
+        //   CLIENT: this.CLIENT,
+        //   SYSTEM: this.SYSTEM,
+        //   CODE_DEFINE: this.selectCodeItem.ID
+        // }
+      })
+    },
+    sortFn () {
+      const str = this.codeList.reduce((str, item, index) => (str += (item[this.$metaKey]) + ':' + index + ','), '')
+      this.$http.$post({
+        action: 'moveList',
+        entityId: this.$metaId,
+        orderString: str
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.code-manage {
+  display: flex;
+  height: 100%;
+  overflow: hidden;
+}
+.card {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+
+    :deep(.el-card__header) {
+      padding: 0;
+    }
+    :deep(.el-card__body) {
+      flex: 1;
+      overflow: auto;
+      padding: 0 ;
+    }
+
+}
+.card-header {
+  height: 48px;
+  padding: 0 24px;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+.code {
+  width: 320px;
+  height: 100%;
+}
+.code-conatiner {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.code-search {
+  border-bottom: 1px solid var(--epx-border);
+
+    :deep(.filter-item:first-child) {
+      .filter-item-label, .el-button {
+        display: none;
+      }
+    }
+    :deep(.filter-header) {
+      display: none;
+    }
+    :deep(.mobile-filter-container) {
+      margin: 0;
+    }
+    :deep(.keyword-input) {
+      width: 200px;
+    }
+    :deep(.filter-item-label) {
+      display: inline;
+      width: auto;
+    }
+
+}
+.tabs {
+  flex: 1;
+  background: var(--epx-bg-card);
+  margin-left: 20px;
+  height: 100%;
+
+    :deep(.el-tabs__content) {
+      height: calc(100% - 60px);
+      overflow: auto;
+    }
+
+}
+.code-list {
+  flex: 1;
+  overflow: hidden;
+}
+.code-list__inner {
+  display: block;
+  height: 100%;
+  overflow: auto;
+}
+.code-item {
+  padding: 0 24px;
+  height: 48px;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  &:hover, &.active {
+    @include font_color_primary;
+    @include bg_color_primary(.2);
+    .delete-code {
+      display: block;
+    }
+  }
+  &__checkbox {
+    margin-right: 8px;
+    flex-shrink: 0;
+  }
+  &__name {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+.code-batch-bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 6px 16px;
+  background: #eef2ff;
+  border-bottom: 1px solid var(--epx-border);
+  &__count {
+    flex: 1;
+    font-size: 13px;
+    color: #444;
+  }
+}
+.delete-code {
+
+    &.el-button--text {
+      color:#FF4949;
+    }
+&.is-link {
+      color:#FF4949;
+    }
+
+  display: none;
+}
+.add-page {
+  flex: 1;
+}
+.code-detail {
+  flex: 1;
+  margin: 0 12px;
+}
+.code-from {
+  padding-bottom: 16px;
+}
+.code-options {
+  flex: 1;
+}
+.code-options-container {
+  padding: 12px 24px;
+}
+.code-tree {
+  margin-top: 12px;
+
+    &.is-current {
+      :deep(.el-tree-node__content) {
+        @include bg_color_primary(.2)
+      }
+    }
+    :deep(.el-tree-node__content) {
+      height: 40px;
+      &:hover {
+        @include bg_color_primary(.2);
+        .add-option-level, .remove-option {
+          display: inline
+        }
+      }
+    }
+
+}
+.code-option {
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 0 16px;
+}
+.add-option-level {
+  display: none;
+  @include font_color_primary;
+  margin-right: 12px;
+}
+.remove-option {
+  display: none;
+  color: #FF4949;
+}
+.code-option-form__item {
+  width: 320px;
+  display: flex;
+  align-items: center;
+  padding: 12px 24px;
+  >label {
+    width: 72px;
+    flex-shrink: 0;
+  }
+}
+.code-option-form__input {
+
+    :deep(.el-input) {
+      width: 248px;
+    }
+
+}
+.dialog-footer {
+  padding-top: 24px;
+  text-align: center;
+}
+.operate {
+  display: flex;
+  justify-content: space-between;
+
+    :deep(.el-input) {
+      width: 220px;
+      margin-left: 40px;
+    }
+
+}
+.code-from {
+  padding: 0 20px;
+}
+.color-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.color-item {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--epx-radius-s);
+  margin: 6px;
+  cursor: pointer;
+}
+</style>