@qqt-product/system 0.0.1

package/src/lib/components/QcustomConfigEdit/src/useConstant.ts

@@ -0,0 +1,301 @@
+// ########### 表头 ###################
+// ##############  PC绑定函数:  ####################
+const bindFunctionHead =
+  `// editlayout  字段类型:下拉 示列
+function callback(parentRef, pageData, groupData, value, opt, oldVal, form) {
+
+    let setDisabledByProp = (prop, flag) => {
+        for (let group of pageData.groups) {
+            if (group.type) continue;
+            let formFields = group.custom.formFields || [];
+            for (let sub of formFields) {
+                if (sub.fieldName === prop) {
+                    sub.disabled = flag;
+                    break;
+                };
+            };
+        };
+    };
+
+    let flag = (value === '0' || form.ebiddingMethod !== '0');
+    let disabledFlag = (value === '0' || value === '1' || form.ebiddingMethod !== '0');
+    setDisabledByProp('beforeEndMinute', flag);
+    setDisabledByProp('delayMinute', flag);
+    setDisabledByProp('delayCount', disabledFlag);
+
+    let setValidateRuleByProp = (prop, flag) => {
+        let index = -1;
+        let fieldLabel;
+        let rule = {};
+        for (let group of pageData.groups) {
+            if (group.type) continue;
+            let formFields = group.custom.formFields || [];
+            for (let sub of formFields) {
+                if (sub.fieldName === prop) {
+                    sub.required = flag ? '1' : '0';
+                    fieldLabel = sub.fieldLabel;
+                    index = pageData.groups.indexOf(group);
+                    break;
+                };
+            };
+        };
+
+        rule[prop] = [{
+            required: flag,
+            message: \`` +
+  '${fieldLabel}' +
+  `必填\`
+        }];
+        if (index !== -1) {
+            pageData.groups[index].custom.validateRules = Object.assign({}, pageData.groups[index].custom.validateRules, rule);
+        };
+    };
+
+    let validateFlag = (value === '1' || value === '2') && form.ebiddingMethod === '0';
+    let delayCountValidateFlag = (value === '2' && form.ebiddingMethod === '0');
+
+    setValidateRuleByProp('beforeEndMinute', validateFlag);
+    setValidateRuleByProp('delayMinute', validateFlag);
+    setValidateRuleByProp('delayCount', delayCountValidateFlag);
+}`
+
+// ##############  M端绑定函数:  ####################
+const initFunctionHead =
+  `/**
+ * 业务规则 
+ * 延期规则, prop: 'delayRule', 0 不允许延期，1 不限制延期次数, 2 有限制次数延期
+ * 结束前多少分钟, prop: 'beforeEndMinute'
+ * 延期多少分钟, prop: 'delayMinute'
+ * 可以延期次数, prop: 'delayCount'
+ *
+ * @param {Object} Vue 整个实例
+ * @param {Object} _pageData 页面原所有数据，包括 分组 groups + formFields itemColumns
+ * @param {Object} _form 当前表单对象(表头状态时才有)
+ * @param {Object} _row 当前表格行所有对象(表行状态时才有)
+ * @param {String} _value 当前所选值
+ * @param {object} _cacheAllData 页面当前所有实时数据
+ * @param {Array} _data 弹窗选择行勾选数据
+ */
+function initFunction(Vue, { _pageData, _form, _row, _value, _cacheAllData, _data }) {
+
+    let setDisabledByProp = (targetProp, flag) => {
+        for (let group of _pageData.groups) {
+            if (group.type || group.type === 'item') continue;
+            let formFields = group.custom.formFields || [];
+            for (let sub of formFields) {
+                if (sub.fieldName === targetProp) {
+                    sub.disabled = flag;
+                    break;
+                };
+            };
+        };
+    };
+
+    let flag = (_value === '0' || _form.ebiddingMethod !== '0');
+    let disabledFlag = (_value === '0' || _value === '1' || _form.ebiddingMethod !== '0');
+    setDisabledByProp('beforeEndMinute', flag);
+    setDisabledByProp('delayMinute', flag);
+    setDisabledByProp('delayCount', disabledFlag);
+
+    let setValidateRuleByProp = (targetProp, flag) => {
+        let index = -1;
+        let fieldLabel;
+        let rule = {};
+        for (let group of _pageData.groups) {
+            if (group.type || group.type === 'item') continue;
+            let formFields = group.custom.formFields || [];
+            for (let sub of formFields) {
+                if (sub.fieldName === targetProp) {
+                    sub.required = flag ? '1' : '0';
+                    fieldLabel = sub.fieldLabel;
+                    index = _pageData.groups.indexOf(group);
+                    break
+                };
+            };
+        };
+
+        rule[targetProp] = [{
+            required: flag,
+            message: \`请输入` +
+  '${fieldLabel}' +
+  `\`,
+            trigger: ["change", "blur"],
+        }];
+        if (index !== -1) {
+            _pageData.groups[index].custom.validateRules = Object.assign({}, _pageData.groups[index].custom.validateRules, rule);
+        };
+    };
+
+    let validateFlag = (_value === '1' || _value === '2') && _form.ebiddingMethod === '0';
+    let delayCountValidateFlag = (_value === '2' && _form.ebiddingMethod === '0');
+
+    setValidateRuleByProp('beforeEndMinute', validateFlag);
+    setValidateRuleByProp('delayMinute', validateFlag);
+    setValidateRuleByProp('delayCount', delayCountValidateFlag);
+}`
+
+// ##############  拓展:  ####################
+const extendHead = `/* extend 原设计是对字段自定义配置，也是对绑定函数callback 的补充
+*  以下是结合弹窗组件的示列
+*/
+{
+    modalColumns: [{
+        field: 'toElsAccount',
+        fieldLabelI18nKey: 'i18n_title_supplierAccount',
+        title: '供应商ELS账号',
+        with: 150,
+    },
+    {
+        field: 'supplierCode',
+        fieldLabelI18nKey: 'i18n_title_supplierCode',
+        title: '供应商编码',
+        with: 150,
+    },
+    {
+        field: 'supplierName',
+        fieldLabelI18nKey: 'i18n_title_supplierName',
+        title: '供应商名称',
+        with: 150,
+    }
+    ],
+    modalUrl: '/supplier/supplierMaster/list',
+    modalParams: {},
+    beforeCheckedCallBack: function (parentRef, pageData, groupData, form) {
+        return new Promise((resolve, rejec) => {
+            let orderStatus = form.orderStatus || '';
+            console.log("orderStatus", orderStatus);
+            return orderStatus === '0' ? resolve('success') : rejec('只允许操作新建状态单据');
+        })
+    }
+}`
+
+// ##############  自定义校验方法:  ####################
+const fieldValidatorHead = `/* 增强表单校验，表单配置的校验除了必填和正则表达式，增加验证方法，应付复杂的表单验证
+*  示列
+*/
+{
+    validateMethod: function (taht, form, currentField, rule, value, callback) {
+        let startTime = new Date(form.checkStartDate).getTime()
+        let endTime = new Date(form.checkEndDate).getTime()
+        if (startTime > endTime) {
+            callback(new Error('开始时间不能大于结束时间'))
+        } else {
+            callback()
+        }
+    },
+    trigger: 'change'
+}`
+
+// ##############  计算公式:  ####################`
+const formulaHead = '${ MaterialCost }+${ scrapRate } +${ ManufactExpenses }'
+
+// ########### 表行 ###################
+// ##############  PC绑定函数:  ####################
+const bindFunctionRow = `// editlayout  字段类型:弹窗 示列
+function callback(row, data, _self) {
+    row.orderProgressTemplateNumber = data[0].progressTemplateNumber
+    row.orderProgressTemplateName = data[0].progressTemplateName
+    row.orderProgressTemplateId = data[0].id
+}`
+
+// ##############  M端绑定函数:  ####################
+const initFunctionRow = `/*
+* @param {Object} Vue 整个实例
+* @param {Object} _pageData 页面原所有数据，包括 分组 groups + formFields itemColumns
+* @param {Object} _form 当前表单对象(表头状态时才有)
+* @param {Object} _row 当前表格行所有对象(表行状态时才有)
+* @param {String} _value 当前所选值
+* @param {object} _cacheAllData 页面当前所有实时数据
+* @param {Array} _data 弹窗选择行勾选数据
+*/
+function initFunction(Vue, { _pageData, _form, _row, _value, _cacheAllData, _data }) {
+    let { taxCode = '', taxRate = '' } = _data[0] || {};
+    _row.taxCode = taxCode;
+    _row.taxRate = taxRate;
+}`
+
+// ##############  拓展:  ####################
+const extendRow = `/* extend 原设计是对字段自定义配置，也是对绑定函数callback 的补充
+*  以下是结合弹窗组件的示列
+*/
+{
+    modalColumns: [{
+        field: 'taxCode',
+        title: '税码',
+        fieldLabelI18nKey: 'i18n_field_taxCode',
+        with: 150,
+    }, {
+        field: 'taxRate',
+        title: '税率（%）',
+        fieldLabelI18nKey: 'i18n_field_taxRate',
+        with: 150,
+    }, {
+        field: 'taxName',
+        title: '税码名称',
+        fieldLabelI18nKey: 'i18n_field_taxName',
+        with: 150,
+    }, {
+        field: 'remark',
+        title: '备注',
+        fieldLabelI18nKey: 'i18n_field_remark',
+        with: 150,
+    }],
+    modalUrl: '/base/tax/list',
+    modalParams: {},
+    // 表行弹窗清除按钮回调
+    afterRowClearCallBack:function(Vue,row){
+        row.taxCode = ''
+        row.taxRate = ''
+    }
+}`
+
+// ##############  自定义校验方法:  ####################
+const fieldValidatorRow = `/* 增强表单校验，表单配置的校验除了必填和正则表达式，增加验证方法，应付复杂的表单验证
+*  示列
+*/
+/**
+     * @param {*} _this
+     * @param {*} item 
+     * @param {*} rule 规则
+     * @param {*} value 当前值
+     * @param {*} row 编辑态当前行
+     * @param {*} column 编辑列
+     * 
+**/
+ {
+    validateMethod: function (that, item, rule, value, row, column) {
+        //编辑态下,that可以获取当前页面所有值
+        debugger
+        if (row.effectiveDate && row.expiryDate) {
+            let effectiveDate = new Date(row.effectiveDate).getTime()
+            let expiryDate = new Date(row.expiryDate).getTime()
+            if (effectiveDate > expiryDate) {
+                return new Error('生效日期不能大于失效日期')
+            }
+        }
+    },
+    trigger: 'change'//blur,change,manual
+}`
+
+// ##############  计算公式:  ####################
+const formulaRow = '${MaterialCost}+${scrapRate}+${ManufactExpenses}'
+
+export const EditSample = {
+  bindFunctionHead,
+  initFunctionHead,
+  extendHead,
+  fieldValidatorHead,
+  formulaHead,
+  bindFunctionRow,
+  initFunctionRow,
+  extendRow,
+  fieldValidatorRow,
+  formulaRow,
+}
+
+export const url = {
+  add: '/template/templateHead/add',
+  edit: '/template/templateHead/edit',
+  detail: '/template/templateHead/queryById',
+  publish: '/template/templateHead/generateConfig',
+}

package/src/lib/components/QcustomConfigEdit/style/index.less

@@ -0,0 +1,41 @@
+.page-container {
+  .ant-btn {
+    & + .ant-btn {
+      margin-left: 8px;
+    }
+  }
+  :deep(.ant-select-selection) {
+    position: relative;
+    z-index: 1;
+  }
+  .business-tips {
+    width: 64.6%;
+    margin: 0 auto;
+    margin-bottom: 10px;
+  }
+  :deep(.ant-input-affix-wrapper .ant-input-suffix) {
+    z-index: 1;
+  }
+  .skeleton-wrap {
+    margin-top: 100px;
+    text-align: center;
+    line-height: 100px;
+  }
+}
+.switch-config .switch-config-item {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px dashed #eee;
+  padding: 10px 0;
+}
+.switch-config > div:first-child {
+  padding-top: 0;
+}
+.verify-config {
+  margin-bottom: 20px;
+  .tab-clo-left {
+    padding-right: 10px;
+    text-align: right;
+    line-height: 32px;
+  }
+}

package/src/lib/components/QcustomConfigList/component/ImportJsonCustomConfig.vue

@@ -0,0 +1,135 @@
+<template>
+  <vxe-modal title="导入数据" :width="720" v-model="visible" :confirmLoading="confirmLoading" show-footer @confirm="ok" @close="close">
+    <a-spin :spinning="confirmLoading">
+      <div class="steps-content">
+        <div v-if="current === 0" v-show="!isLoading" class="step-2">
+          <div class="import-desc">
+            <h3>导入说明：</h3>
+            <ul>
+              <li>请先导出业务模板配置的数据再进行导入</li>
+              <li>文件大小不能超过20M；</li>
+              <li>仅支持 *.json 格式文件；</li>
+            </ul>
+          </div>
+          <a-upload-dragger name="file" :headers="uploadHeader" :accept="accept" :action="importUrl" @change="imortChangeEvent" :showUploadList="false" :beforeUpload="beforeUpload">
+            <p class="ant-upload-drag-icon">
+              <a-icon type="inbox" />
+            </p>
+            <p class="ant-upload-text">点击或把文件拖拽到这个区域上传</p>
+          </a-upload-dragger>
+        </div>
+        <div v-if="isLoading" class="step-3">
+          <a-result status="success" title="导入成功"></a-result>
+        </div>
+      </div>
+    </a-spin>
+  </vxe-modal>
+</template>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { message } from '@qqt-product/ui'
+//ts
+import { MapObjectNoneType } from '../../../utils/global.types'
+// import { Steps, Result } from 'ant-design-vue'
+export default defineComponent({
+  name: 'ImportJsonCustomConfig',
+  emits: ['close'],
+  components: {
+    // ASteps: Steps,
+    // AStep: Steps.Step,
+    // AResult: Result,
+  },
+  props: {
+    userToken: {
+      type: String,
+      defalut: '',
+    },
+    isShow: {
+      type: Boolean,
+      defalut: false,
+    },
+  },
+
+  data() {
+    return {
+      visible: false,
+      current: 0,
+      confirmLoading: false,
+      accept: '.json',
+      uploadHeader: { 'X-Access-Token': this.userToken },
+      isPreview: 0,
+      tableColumns: [],
+      tableData: [],
+      dataKey: '',
+      isLoading: false,
+      percent: 0,
+      importUrl: '/els/template/templateHead/importJson',
+    }
+  },
+  computed: {
+    lastStepIndex() {
+      let current = this.isPreview === 1 ? 2 : 1
+      return current
+    },
+  },
+  methods: {
+    open() {
+      this.isLoading = false
+      this.visible = true
+    },
+    ok() {
+      this.visible = false
+      this.$emit('close')
+    },
+    close() {
+      this.visible = false
+      this.$emit('close')
+      if (this.isLoading) {
+        this.isLoading = false
+        // 刷新列表
+        // this.$parent.$refs.listPage.loadData()
+      }
+    },
+    onChange(current: number) {
+      this.current = current
+    },
+    // 导入响应事件（上传中、完成、失败都会调用这个函数）
+    imortChangeEvent(info: MapObjectNoneType) {
+      // 服务端响应返回信息
+      const res = info.file.response
+      if (res && res.success) {
+        this.isLoading = true
+        // this.$parent.$refs.listPage.loadData()
+      } else if (res && !res.success) {
+        message.error('文件导入失败' + '：' + res.message)
+      }
+    },
+    // 上传之前文件校验
+    beforeUpload(file: MapObjectNoneType) {
+      const suffix = file.name.substr(file.name.lastIndexOf('.'))
+      if (suffix !== '.json') {
+        message.warning('请上传Json文件')
+        return false
+      }
+      if (file.size > 20 * 1024 * 1024) {
+        message.warning('超过最大文件限制!')
+        return false
+      }
+    },
+  },
+  watch: {
+    isShow: function (nw) {
+      console.log('nw', nw)
+      if (nw) {
+        this.visible = nw
+        this.isLoading = false
+      }
+    },
+  },
+})
+</script>
+<style lang="less" scoped>
+.progress {
+  text-align: center;
+}
+</style>

package/src/lib/components/QcustomConfigList/index.ts

@@ -0,0 +1,6 @@
+import QcustomConfigList from './src/QcustomConfigList.vue'
+import qqtUtils from '@qqt-product/utils'
+
+export default qqtUtils.withInstall(QcustomConfigList)
+
+export { QcustomConfigList }