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

package/src/components/ClientList.vue

@@ -0,0 +1,155 @@
+<script>
+// @jsx-vue3（T30 JSX 批：Vue3 JSX 语法，@vue/babel-plugin-jsx 编译）
+
+import List from '@epxing/components/src/entity-list'
+export default {
+  name: 'epx-client-list',
+  extends: List,
+  data () {
+    return {
+      showCopyDatabaseModal: false,
+      selectClient: {},
+      createDataSouceWay: true,
+      values: { 'busi|DATASOURCE': '', 'busi|NAME': '' }
+    }
+  },
+  changeConfirmDelete () {
+    setTimeout(() => {
+      const checkbox = this.$refs.checkbox.$el
+      const checkboxInput = checkbox.children[0]
+      if (this.confirmDelete) {
+        checkbox.className += ' is-checked'
+        checkboxInput.className += ' is-checked'
+      } else {
+        checkbox.className = checkbox.className.replace(' is-checked', '')
+        checkboxInput.className = checkboxInput.className.replace(' is-checked', '')
+      }
+    }, 200)
+  },
+  methods: {
+    renderCopyDataBase () {
+      return (
+        <el-dialog title={this.$t('database replication')} modelValue={this.showCopyDatabaseModal} onClose={this.closeModal}>
+          <div>
+            <p class="copy-database__field">{this.$t('customer name')}：{this.selectClient.NAME}</p>
+            <p class="copy-database__field">{this.$t('Customer ID')}：{this.selectClient.CODE}</p>
+            <p class="copy-database__field">{this.$t('data origin')}：
+              {/* 原先两个 el-radio 上挂着 onClick / onClick_native（把 createDataSouceWay 设成 1 / 2）。
+                  它们从来没触发过：el-radio 不 $emit('click')，onClick_native 更是连 Vue2 JSX 都不认的写法。
+                  而且**它们死着才是对的** —— 下游全用 `=== true` / `=== false` 判分支，真设成 1/2 会让两个
+                  分支同时消失。切换由 el-radio-group 的 onChange 正常承担。故直接删掉这两个死 handler。 */}
+              <el-radio-group modelValue={this.createDataSouceWay} onChange={() => (this.createDataSouceWay = !this.createDataSouceWay)}>
+                <el-radio label={true} value={true}>{this.$t('specifying the data source')}</el-radio>
+                <el-radio label={false} value={false}>{this.$t('creating a data source')}</el-radio>
+              </el-radio-group>
+            </p>
+            { this.createDataSouceWay === true && (
+              <p class="copy-database__field">{this.$t('database replication')}：<epx-form-object values={this.values} onChange={v => (this.values = { ...this.values, ...v })} fieldConfig={{ attriName: 'busi|DATASOURCE', attriLabel: this.$t('select database'), dataType: 'object', codeKey: 'DC_DB_DEFINE', state: 'EDIT' }}></epx-form-object></p>) }
+            {
+              this.createDataSouceWay === false && (
+                <div>
+                  <p class="copy-database__field">{this.$t('name of the database')}：<epx-form-input values={this.values} onChange={v => (this.values = { ...this.values, ...v })} fieldConfig={{ attriName: 'busi|NAME', state: 'EDIT' }} /></p>
+                  <p class="copy-database__field">{this.$t('type of database')}：<epx-form-input values={this.values} onChange={v => (this.values = { ...this.values, ...v })} fieldConfig={{ attriName: 'busi|TYPE', state: 'EDIT' }}/></p>
+                  <p class="copy-database__field">{this.$t('database link')}：<epx-form-input values={this.values} onChange={v => (this.values = { ...this.values, ...v })} fieldConfig={{ attriName: 'busi|URL', state: 'EDIT' }}/></p>
+                  <p class="copy-database__field">{this.$t('database account')}：<epx-form-input values={this.values} onChange={v => (this.values = { ...this.values, ...v })} fieldConfig={{ attriName: 'busi|ACCOUT', state: 'EDIT' }}/></p>
+                  <p class="copy-database__field">{this.$t('database password')}：<epx-form-input values={this.values} onChange={v => (this.values = { ...this.values, ...v })} fieldConfig={{ attriName: 'busi|PASSWORD', state: 'EDIT' }}/></p>
+                </div>
+              )
+            }
+          </div>
+          <div class="copy-database__button--group">
+            <el-button size="middle" type="primary" onClick={this.addDatabase}>{this.$t('save')}</el-button>
+            <el-button size="middle" onClick={this.closeModal}>{this.$t('cancel')}</el-button>
+          </div>
+        </el-dialog>
+      )
+    },
+    copyDatabase (config, row) {
+      let item = null
+      if (row) {
+        item = row
+      } else {
+        if (this.selection.length > 1) {
+          this.$message.error(this.$t('Do not select multiple records'))
+          return
+        }
+        if (this.selection.length === 0) {
+          this.$message.error('请选择一个记录')
+          return
+        }
+        item = this.selection[0]
+      }
+      this.showCopyDatabaseModal = true
+      this.selectClient = item
+
+    //   const query = {
+    //     metaId: this.$metaId,
+    //     flag: 'v_copy_database',
+    //     component: 'add',
+    //     pageType: 'EDIT',
+    //     openType: '2',
+    //     id: item[this.$metaKey]
+    //   }
+    //   this.$createPage({
+    //     ...query
+    //   })
+    },
+    addDatabase () {
+      if (this.createDataSouceWay === true) {
+        if (!this.values['busi|DATASOURCE']) {
+          this.$message.error('请选择数据源')
+          return
+        }
+        const params = {
+          action: 'clientSync',
+          entityId: 'FM_CLIENT',
+          resourceClientId: this.selectClient[this.$metaKey],
+          targetDataSourceId: this.values['busi|DATASOURCE']
+        }
+        this.$confirm('数据库复制存在风险，请确认复制数据源，是否继续？', this.$t('hint'), {
+          confirmButtonText: this.$t('confirm'),
+          cancelButtonText: this.$t('cancel'),
+          type: 'warning'
+        }).then(() => {
+          const loading = this.$loading({
+            lock: true,
+            text: '正在复制...',
+            spinner: 'el-icon-loading',
+            background: 'rgba(0, 0, 0, 0.7)'
+          })
+          this.$http.$request(params)
+            .then(() => {
+              loading.close()
+              this.$message.success('复制成功')
+              this.showCopyDatabaseModal = false
+            })
+            .catch(err => {
+              loading.close()
+              this.$message.error(err.message || '处理失败')
+            })
+        })
+      }
+    },
+    closeModal () {
+      this.showCopyDatabaseModal = false
+      this.selectClient = {}
+    }
+  },
+  created () {
+    this.renderComponents.push(this.renderCopyDataBase)
+  }
+}
+</script>
+<style lang="scss">
+.copy-database__field {
+  display: flex;
+  align-items: center;
+  height: 60px;
+  box-sizing: border-box;
+  padding: 10px 16px;
+}
+.copy-database__button--group {
+  margin-top: 12px;
+  margin-left: 120px;
+}
+</style>

package/src/components/CodeDetail.vue

@@ -0,0 +1,465 @@
+<template>
+  <div class="code-container">
+    <div class="code-from">
+        <epx-add-form-item
+            v-if="loadForm"
+            :formData="selectCodeItem"
+            :pageType="editable? 'EDIT':'DETAIL'"
+            :formConfigs="{pageType: editable? 'EDIT':'DETAIL'}"
+            :edit="editable"
+            :comp-configs="{...$configs, labelWidth: '90', editable: true}"
+            :form="this"
+            @cancel-edit="cancelEdit"
+        ></epx-add-form-item>
+        <div class="operate">
+            <span></span>
+            <el-button v-if="editable===false && selectCodeItem.SYSTEM===SYSTEM" size="default" type="primary" @click="editCode">编辑</el-button>
+            <span></span>
+        </div>
+    </div>
+    <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 v-if="selectCodeItem.SYSTEM&&selectCodeItem.SYSTEM===SYSTEM">
+                <el-button size="default" type="primary" @click="addCodeOption(null)">添加</el-button>
+                <!-- <el-button size="default" type="primary" @click="importCurrentCode">导入代码项</el-button> -->
+            </div>
+            <span></span>
+        </div>
+        <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 v-if="selectCodeItem.SYSTEM===SYSTEM">
+                <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 v-if="addCodeOptionVisible" class="add-code-container">
+            <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>
+                <el-input v-model="option.NAME" type="text" placeholder="请输入名称"></el-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 size="small" @click="addCodeOptionVisible = false;upCodeOption= null">取 消</el-button>
+                <el-button size="small" type="primary" @click="saveCodeOption">确 定</el-button>
+                <el-button size="small" type="primary" @click="saveCodeOption(true)">确定并继续</el-button>
+            </div>
+        </div>
+    </div>
+    <!-- <el-dialog
+      :title="dialogTitle"
+      :visible.sync="addCodeOptionVisible"
+      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>
+          <el-input v-model="option.NAME" type="text" placeholder="请输入名称"></el-input>
+        </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 component from '@epxing/core/src/mixins/component'
+export default {
+  name: 'epx-code-detail',
+  mixins: [component],
+  data () {
+    return {
+      selectCodeItem: {},
+      editable: false,
+      loadForm: true,
+      codeOptionsTree: [],
+      addCodeOptionVisible: false,
+      upCodeOption: null,
+      option: {},
+      optionKey: '',
+      addPage: false,
+      total: 0,
+      dialogTitle: '代码项新增',
+      activeTab: 'option',
+      colorList: ['#FFFFFF', '#F2F3F7', '#E2F4FD', '#EEFAE1', '#F7E9BC', '#FBD3D0', '#C2CDF0', '#DBCEF5', '#E8D5CB', '#C0EBE5', '#E48484', '#DFB85D', '#B1C774', '#77C386', '#6EC4C4', '#69B1E4', '#6F81DB', '#A287E1', '#75636A', '#7C9CC0']
+    }
+  },
+  watch: {
+    optionKey (val) {
+      this.$refs.tree.filter(val)
+    }
+  },
+  methods: {
+    getData () {
+      this.$http.get({
+        entityId: this.$metaId,
+        id: this.$query.id
+      })
+        .then(data => {
+          this.selectCodeItem = { ...data.data }
+        })
+    },
+    getCodeOptions () {
+      this.$http.getTree({
+        entityId: 'FM_CODE_DEFINE',
+        key: this.$query.id,
+        useCache: '0',
+        mysort: 'ORDER_NUM',
+        dir: 'ASC',
+        scope: 'all'
+      })
+        .then(data => {
+          this.codeOptionsTree = data
+        })
+    },
+    cancelEdit (finish) {
+      this.editable = false
+      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)
+            }
+          })
+      }
+      this.loadForm = false
+      this.$nextTick(() => {
+        this.loadForm = true
+      })
+    },
+    editCode () {
+      this.editable = true
+      this.dialogTitle = '编辑代码项'
+      this.loadForm = false
+      this.$nextTick(() => {
+        this.loadForm = true
+      })
+    },
+    addCodeOption (data) {
+      this.addCodeOptionVisible = true
+      this.upCodeOption = data
+      this.dialogTitle = data ? '添加下级代码项' : '新增代码项'
+      this.option = {
+        ID: '',
+        CODE: '',
+        NAME: '',
+        ICON: '',
+        ICON_COLOR: '',
+        ICON_BG_COLOR: '',
+        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 }
+        })
+    },
+    filterNode (value, data) {
+      if (!value) return true
+      return data.title.indexOf(value) !== -1
+    },
+    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()
+        })
+    },
+    saveCodeOption (isContinue) {
+      if (!this.option.CODE || !this.option.NAME) {
+        this.$message.error('请输入代码项信息')
+        return
+      }
+      const params = {
+        'bean.CLIENT': this.$tab.CLIENT || this.CLIENT,
+        'bean.SYSTEM': this.$tab.SYSTEM || this.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_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.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 = {
+            ID: '',
+            CODE: '',
+            NAME: '',
+            ICON: '',
+            ICON_COLOR: '',
+            ICON_BG_COLOR: '',
+            ENABLE: '1'
+          }
+          if (isContinue !== true) {
+            this.upCodeOption = null
+            this.addCodeOptionVisible = false
+          }
+          this.isRequesting = false
+          // 获取代码表
+          if (this.$configs.updateStore) {
+            this.$store.commit({
+              type: 'DELETE_LIST',
+              key: this.selectCodeItem.ID
+            })
+            this.$store.dispatch({
+              type: 'ADD_LIST',
+              key: this.selectCodeItem.ID
+            })
+          }
+        })
+        .catch(err => {
+          this.$message.error(err.message || '处理失败')
+          this.isRequesting = false
+        })
+    },
+    deleteCodeOption (item) {
+      this.$http.removeMulti({
+        entityId: 'FM_CODE_PUB',
+        ids: item.id
+      })
+        .then(() => {
+          this.getCodeOptions()
+        })
+    },
+    importCurrentCode () {
+      this.$createPage({
+        metaId: 'FM_CODE_PUB',
+        component: 'import-page',
+        dynamicParams: {
+          CLIENT: this.CLIENT,
+          SYSTEM: this.SYSTEM,
+          CODE_DEFINE: this.selectCodeItem.ID
+        }
+      })
+    }
+  },
+  created () {
+    this.getData()
+    this.getCodeOptions()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.code-container{
+    display: flex;
+    // height: calc(100% - 40px);
+    height: 450px;
+}
+.code-options-container {
+  flex: 3;
+  padding: 12px 24px;
+  overflow: auto;
+}
+.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;
+padding-top: 10px;
+  >label {
+    width: 72px;
+    flex-shrink: 0;
+  }
+}
+.dialog-footer {
+//   padding-top: 24px;
+  padding-top: 10px;
+  text-align: center;
+//   margin-left: 96px;
+}
+.operate {
+  display: flex;
+  justify-content: space-between;
+
+    :deep(.el-input) {
+      width: 220px;
+      margin-left: 40px;
+    }
+
+}
+.code-from {
+  width: 400px;
+  height: 100%;
+  overflow: auto;
+  border-right: 1px solid var(--epx-border);
+}
+.add-code-container{
+  position: absolute;
+  top: 80px;
+  background: var(--epx-bg-card);
+  box-shadow: 0 2px 5px rgba(0,0,0,.2);
+  margin-left: 35px;
+  border: 1px dotted var(--epx-border);
+  margin: 10px 0;
+  padding: 19px;
+}
+.color-list {
+  display: flex;
+  flex-wrap: wrap;
+}
+.color-item {
+  width: 24px;
+  height: 24px;
+  border-radius: var(--epx-radius-s);
+  margin: 6px;
+  cursor: pointer;
+}
+</style>