kz-ui-base 1.0.61 → 1.0.63

package/common/src/components/base/dialog/editDialog.vue

@@ -8,7 +8,10 @@
     append-to-body
     v-dialogDrag
     v-dialogDragHeight
+    :before-close="cancel"
+    v-if="dialogShow"
   >
+    <!-- custom-class="customDialog" -->
     <slot name="entityForm">
       <el-form
         ref="entity"
@@ -16,44 +19,94 @@
         :rules="rules"
         :label-width="labelWidth"
       >
-        <el-row>
-          <FormColumns ref="FormColumns"
-            :columns.sync="columns"
+        <el-row type="flex" style="flex-wrap: wrap">
+          <FormColumns
+            ref="FormColumns"
+            :areaSetting="areaSetting"
+            :columns.sync="oldeditColumns?oldeditColumns:columns"
             :entity.sync="entity"
             @change="onChangeEvent"
-          ></formColumns>
+            @onSearch="onSearch"
+          ></FormColumns>
         </el-row>
       </el-form>
+      <TableForm
+        ref="TableForm"
+        v-if="setting.isShowItems && listDataShow"
+        :listColumns="setting.listSetting.listColumns"
+        :listData="listData"
+        :listSetting="setting.listSetting"
+        @change="onChangeEvent"
+        @update="updateMethod"
+      ></TableForm>
     </slot>
-    <slot name="footer">
-      <div class="dialog-footer">
+    <div slot="footer">
+      <div class="dialog-footer" v-if="setting.bottomShow">
         <el-button
+        v-if="!oldeditColumns"
           type="primary"
           :loading="setting.submitLoading"
           @click="submitForm"
           >确 定</el-button
         >
         <el-button @click="cancel">取 消</el-button>
+      </div>
+      <div class="dialog-footer" v-if="customOpMenus&&customOpMenus.length">
         <el-button
           v-for="opMenu in customOpMenus"
           :key="opMenu.name"
+          :icon="opMenu.icon"
+          :type="opMenu.cssType"
+          :plain="opMenu.plain"
+          :loading="setting.submitLoading"
           @click="handleCustomOpMenuClick(opMenu)"
           >{{ opMenu.text }}</el-button
         >
       </div>
-    </slot>
+    </div>
   </el-dialog>
+  <div v-else>
+    <slot name="entityForm">
+      <el-form
+        ref="entity"
+        :model="entity"
+        :rules="rules"
+        :label-width="labelWidth"
+      >
+        <el-row type="flex" style="flex-wrap: wrap">
+          <FormColumns
+            ref="FormColumns"
+            :areaSetting="areaSetting"
+            :columns.sync="oldeditColumns?oldeditColumns:columns"
+            :entity.sync="entity"
+            @change="onChangeEvent"
+            @onSearch="onSearch"
+          ></FormColumns>
+        </el-row>
+      </el-form>
+      <TableForm
+        ref="TableForm"
+        v-if="setting.isShowItems && listDataShow"
+        :listColumns="setting.listSetting.listColumns"
+        :listData="listData"
+        :listSetting="setting.listSetting"
+        @change="onChangeEvent"
+        @update="updateMethod"
+      ></TableForm>
+    </slot>
+  </div>
 </template>
 
 <script>
-import { addEntity, updateEntity } from "../../../api/common/common";
-
-import FormColumns from "@srcComponents/customForm/formColumns";
+import { addEntity, updateEntity, listEntity } from "@api/common/common";
+import FormColumns from "@srcComponents/customForm/formColumns.vue";
+import TableForm from "./tableForm.vue";
 
 export default {
   name: "EditDialog",
   components: {
     FormColumns,
+    TableForm,
   },
   props: {
     //微服务模块名称
@@ -119,6 +172,19 @@ export default {
         ];
       },
     },
+    //
+    areaSetting: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    dialogShow: {
+      type: Object,
+      default: function () {
+        return true
+      },
+    },
   },
   data() {
     return {
@@ -126,10 +192,50 @@ export default {
       width: this.setting.width || "60%",
       //input框宽度
       labelWidth: this.setting.labelWidth || "100px",
+      items:[],
+      listData:[],
+      listDataShow:false,
     };
   },
   watch: {},
-  created() {},
+  created() {
+    if (this.setting && this.setting.bottomShow == undefined) {
+      this.setting.bottomShow = true;
+    }
+    if (this.setting && this.setting.width) {
+      this.width = this.setting.width;
+    } else {
+      this.width = "60%";
+    }
+    if (this.setting && this.setting.labelWidth) {
+      this.labelWidth = this.setting.labelWidth;
+    } else {
+      this.labelWidth = "100px";
+    }
+    if (
+      this.setting.isShowItems &&
+      (this.setting.listSetting.addQueryOpen || this.setting.type != "add")
+    ) {
+      if (this.entity.children) {
+        this.$set(this, "listData", this.entity.children);
+      } else {
+        listEntity(
+          this.setting.itemModuleName,
+          this.setting.itemServiceName,
+          {
+            [this.setting.itemFkField]:
+              this.entity[this.setting.listSetting.pkField],
+
+            ...this.setting.listSetting.parameter,
+          },
+          this.setting.listSetting.getListAction
+        ).then((response) => {
+          this.$set(this, "listData", response.rows);
+          this.listDataShow = true;
+        });
+      }
+    }
+  },
   mounted() {},
   activated() {
     console.log("editDialog");
@@ -138,40 +244,91 @@ export default {
     //当前绑定实体字段值变更事件
     onChangeEvent(args) {
       this.$emit("change", args);
-      //args:  { property: this.column.property, value: value, entity: this.entity, column: this.column }
-      //console.log(args);
     },
+
     show() {
       this.setting.isShow = true;
     },
-    /** 组件内更新属性值 */
-    updateEntity(args) {},
+    updateMethod(value) {
+      this.items = value;
+    },
     // 取消按钮
     cancel() {
       this.setting.isShow = false;
-      //this.reset()
       this.$emit("onCancelClick", { data: this.entity, setting: this.setting });
+      
     },
     // 表单重置
     reset() {
       for (var column of this.columns) {
         this.entity[column.property] = column.default;
       }
-      this.resetForm("entity");
+      (this).resetForm("entity");
     },
     /** 提交按钮 */
     submitForm: function () {
       var self = this;
       this.setting.submitLoading = true;
-      this.$refs["entity"].validate((valid) => {
+
+      // (this.$refs["TableForm"]).$refs['entity']
+      //   .validate((valid) => {
+
+      //   });
+      (this.$refs["entity"]).validate((valid) => {
         if (valid) {
-          this.$emit("onSaveClick", {
-            data: this.entity,
-            setting: this.setting,
-          });
+          if (this.setting.isShowItems) {
+            (this.$refs["TableForm"]).$refs["entity"].validate((valid) => {
+              if (valid) {
+                if (this.setting.type && this.setting.type == "add") {
+                  this.$emit("onAddSaveClick", {
+                    data: this.entity,
+                    setting: this.setting,
+                  });
+                  self.setting.submitLoading = false;
+                } else {
+                  // if (this.setting.isShowItems) {
+                  //   this.$emit("onSaveClick", {
+                  //     data: { data: this.entity, items: this.items },
+                  //     setting: this.setting,
+                  //   });
+                  // } else {
+                  // }
+                  this.$emit("onSaveClick", {
+                    data: this.entity,
+                    setting: this.setting,
+                  });
+                  self.setting.submitLoading = false;
+                }
+              } else {
+                this.setting.submitLoading = false;
+              }
+            });
+          } else {
+            if (this.setting.type && this.setting.type == "add") {
+              this.$emit("onAddSaveClick", {
+                data: this.entity,
+                setting: this.setting,
+              });
+              self.setting.submitLoading = false;
+            } else {
+              // if (this.setting.isShowItems) {
+              //   this.$emit("onSaveClick", {
+              //     data: { data: this.entity, items: this.items },
+              //     setting: this.setting,
+              //   });
+              // } else {
+              // }
+              this.$emit("onSaveClick", {
+                data: this.entity,
+                setting: this.setting,
+              });
+              self.setting.submitLoading = false;
+            }
+          }
+        } else {
+          this.setting.submitLoading = false;
         }
       });
-      this.setting.submitLoading = false;
     },
     /** 自定义操作菜单按钮点击处理 */
     handleCustomOpMenuClick(opMenu) {
@@ -181,12 +338,46 @@ export default {
         setting: this.setting,
       });
     },
-  },
-};
+    onSearch(value) {
+      this.$emit("onSearch", value);
+    },
+  }
+}
 </script>
 
 <style scoped>
 .wrapper-container-supplement {
   min-height: 415px;
 }
+::v-deep label {
+  font-weight: 500;
+}
+
+::v-deep .el-input.is-disabled .el-input__inner {
+  color: #606266;
+}
+
+::v-deep .el-form-item {
+  margin-bottom: 16px;
+}
+
+::v-deep .el-form-item--small.el-form-item {
+  margin-bottom: 8px;
+}
+
+::v-deep .el-dialog__body {
+  padding: 24px 24px 0 24px;
+}
+
+::v-deep .el-dialog__footer {
+  text-align: center;
+  border-top: 1px solid #e7e8ed;
+  padding: 12px 0 12px 0;
+}
+
+::v-deep .el-dialog__header {
+  padding: 16px 16px 10px;
+  border-bottom: 1px solid #dcdfe6;
+}
 </style>
+<style></style>

package/common/src/components/base/dialog/tableForm.vue

@@ -0,0 +1,280 @@
+<template>
+  <div style="margin-bottom: 10px">
+    <el-form :model="model" ref="entity">
+      <el-table
+        :border="true"
+        v-loading="loading"
+        :data="model.listData"
+        @selection-change="onSelectionChange"
+        :row-class-name="rowClassName"
+        ref="multipleTable"
+      >
+        <el-table-column type="selection" width="50" align="center" />
+        <el-table-column
+              v-if="listSetting.isShowIndexColumn"
+              type="index"
+              label="序号"
+              width="50"
+              align="center"
+            >
+              <template scope="scope">
+                <span>{{
+                  (listQueryParams.pageNum - 1) * listQueryParams.pageSize +
+                  scope.$index +
+                  1
+                }}</span>
+              </template>
+            </el-table-column>
+        <template v-for="(column, index) in listColumns">
+          <el-table-column
+            :show-overflow-tooltip="true"
+            :key="index"
+            :render-header="addRedStar"
+            :label="column.text"
+            align="center"
+            :prop="column.property"
+            v-if="column.visible != false"
+            :min-width="column.width || 100"
+          >
+            <template scope="scope">
+              <el-form-item
+                :prop="`listData[${scope.$index}].` + column.property"
+                :rules="listSetting.rules[column.property]"
+              >
+                <el-input
+                  v-if="column.displayType == 'TextBox'"
+                  size="small"
+                  v-model="scope.row[column.property]"
+                  placeholder="请输入内容"
+                ></el-input>
+
+                <dropDownList
+                  v-else-if="column.displayType == 'dropDownList'"
+                  :column="column"
+                  :entity="scope.row"
+                  :value="scope.row[column.property]"
+                  :setting.sync="column.setting"
+                  @change="onChangeEvent"
+                ></dropDownList>
+                <DatePicker
+                v-else-if="column.displayType == 'DatePicker'"
+                  :column="column"
+                  :entity="scope.row"
+                  :value="scope.row[column.property]"
+                  :setting.sync="column.setting"
+                  @change="onChangeEvent"
+                >
+                </DatePicker>
+                <Lookup
+                v-else-if="column.displayType == 'Lookup'"
+                  :column="column"
+                  :entity="scope.row"
+                  :value="scope.row[column.property]"
+                  :setting.sync="column.setting"
+                  @change="onChangeEvent"
+                >
+                </Lookup>
+                <changer
+                v-else-if="column.displayType == 'Switch'"
+                  :column="column"
+                  :entity="scope.row"
+                  :value="scope.row[column.property]"
+                  :setting="column.setting"
+                  @change="onChangeEvent"
+                ></changer>
+                <Cascader
+                v-else-if="column.displayType == 'Cascader'"
+                  :column="column"
+                  :entity="scope.row"
+                  :value="scope.row[column.property]"
+                  :setting.sync="column.setting"
+                  @change="onChangeEvent"
+                ></Cascader>
+                <span v-else>
+                    {{ scope.row[scope.column.property] }}
+                  </span>
+              </el-form-item>
+            </template>
+          </el-table-column>
+        </template>
+
+        <el-table-column
+          label="操作"
+          align="center"
+          min-width="160"
+          class-name="small-padding fixed-width"
+          v-if="listSetting.isShowOpColumn"
+        >
+          <template slot-scope="scope">
+            <el-button
+              size="mini"
+              type="text"
+              @click="deleteSingle(scope.$index)"
+              >删除</el-button
+            >
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination
+      v-if="listSetting.isShowPager"
+            :total="listQueryParams.total"
+            :page.sync="listQueryParams.pageNum"
+            :limit.sync="listQueryParams.pageSize"
+            @pagination="getList"
+          />
+    </el-form>
+    <div style="margin-top: 8px" v-if="listSetting.buttonShow">
+      <el-button type="primary" size="mini" @click="newAdd">新增数据</el-button>
+      <el-button @click="deleteAll" type="danger" size="mini"
+        >删除选中</el-button
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import DropDownList from "@srcComponents/customForm/dropDownList.vue";
+import DatePicker from "@srcComponents/customForm/datePicker.vue";
+import Lookup from "@srcComponents/customForm/lookup.vue";
+import changer from "@srcComponents/customForm/switch.vue";
+import Cascader from "@srcComponents/customForm/cascader.vue";
+
+export default {
+  name: "EditDialog",
+  components: {
+    Cascader,
+    DropDownList,
+    DatePicker,
+    Lookup,
+    changer,
+  },
+  props: {
+    listSetting: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    // 列信息
+    listColumns: {
+      type: Array,
+      default: function () {
+        return [
+          //{ key: 0, text: `用户编码`, property: "userNo", visible: true },
+          //{ key: 1, text: `用户账号`, property: "userAccount", visible: true },
+        ];
+      },
+    },
+    // 表单参数
+    listQueryParams: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    // 表单校验
+    rules: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    //编辑界面自定义按钮菜单 - 若无自定义按钮，不需要重写
+    listData: {
+      type: Array,
+      default: function () {
+        return [
+          //{ name: "custom1", visable: true, icon: "ion-plus-round", text: "自定义1" }
+        ];
+      },
+    },
+  },
+  data() {
+    return {
+      model:{
+        listData: [],
+      },
+      multipleSelectAry:[],
+      currentEntities:[],
+      loading:false,
+    };
+  },
+  watch: {
+    listData(newVal, oldVal) {
+      if (newVal) {
+        console.log(newVal)
+        this.$set(this.model, "listData", this.listData);
+      }
+    },
+    model: {
+      handler(newVal, oldVal) {
+        if (newVal) {
+          this.$emit("update", newVal);
+        }
+      },
+      deep: true // 启用深度监听
+    }
+  },
+  created() {
+    if (this.listData) {
+      this.$set(this.model, "listData", this.listData);
+    }
+  },
+  mounted() {},
+  activated() {
+    console.log("editDialog");
+  },
+  methods: {
+    rowClassName(row, index) {
+      row.row.index = row.rowIndex;
+    },
+    onSelectionChange(val) {
+      this.$emit('selectionChange',val)
+      this.currentEntities = val;
+      val.forEach((item) => {
+        this.multipleSelectAry.push(item.index);
+      });
+    },
+    addRedStar(h, { column }) {
+      if (this.listSetting?.rules[column.property]) {
+        return [
+          h("span", { style: "color: red" }, "*"),
+          h("span", " " + column.label),
+        ];
+      }
+      return [h("span", " " + column.label)];
+    },
+    newAdd() {
+      let newData = {};
+      this.listColumns.forEach((item) => {
+        newData[item.property] = "";
+      });
+      this.model.listData.push(newData);
+    },
+    deleteAll() {
+      if (this.multipleSelectAry.length == 0) {
+        (this).$message.error("请选择要删除的数据");
+      }
+      this.model.listData = this.model.listData.filter((item, index) => {
+        return !this.multipleSelectAry.includes(index);
+      });
+      this.multipleSelectAry = [];
+    },
+    onChangeEvent(args) {
+      this.$emit("change", args);
+    },
+    deleteSingle(index) {
+      (this).model.listData.splice(index, 1);
+    },
+    getList(){
+      this.$emit('getList')
+    },
+  }
+}
+</script>
+
+<style scoped>
+.el-form-item{
+  margin-bottom: 0;
+}
+</style>

package/components/input/DynamicInputBox.vue

@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <dict-select v-model="stateValue" v-if="keyInTypeCode === KEY_IN_TYPE_CODE.SELECT_ENUM" v-bind="$attrs"
+                 :type="dictType" @change="change"></dict-select>
+    <dict-select v-model="stateValue" v-else-if="keyInTypeCode === KEY_IN_TYPE_CODE.SELECT_YES_NO" v-bind="$attrs"
+                 type="sys_yes_no_bool" @change="(val) =>{change(val === 'true')}"></dict-select>
+    <el-date-picker v-model="stateValue" v-else-if="keyInTypeCode === KEY_IN_TYPE_CODE.SELECT_DATE" v-bind="$attrs"
+                    @change="change"></el-date-picker>
+    <el-input v-model="stateValue" v-else-if="keyInTypeCode === KEY_IN_TYPE_CODE.INPUT_NUMBER" v-bind="$attrs"
+              @change="change"></el-input>
+    <el-input v-model="stateValue" v-else-if="keyInTypeCode === KEY_IN_TYPE_CODE.INPUT_STRING" v-bind="$attrs"
+              @change="change"></el-input>
+    <span v-else>录入类型有误</span>
+  </div>
+</template>
+
+<script>
+import {KEY_IN_TYPE_CODE} from "@/constant/bd";
+
+export default {
+  name: 'DynamicInputBox',
+  computed: {
+    KEY_IN_TYPE_CODE() {
+      return KEY_IN_TYPE_CODE
+    },
+  },
+  watch: {
+    attributeValue(val) {
+      this.setStateValue(this.keyInTypeCode === KEY_IN_TYPE_CODE.SELECT_ENUM ? this.attributeValueCode : this.attributeValue);
+    },
+    attributeValueCode(val) {
+      this.setStateValue(this.keyInTypeCode === KEY_IN_TYPE_CODE.SELECT_ENUM ? this.attributeValueCode : this.attributeValue);
+    },
+    keyInTypeCode(val) {
+      this.setStateValue(this.keyInTypeCode === KEY_IN_TYPE_CODE.SELECT_ENUM ? this.attributeValueCode : this.attributeValue);
+    }
+  },
+  props: {
+    keyInTypeCode: {
+      type: String,
+      required: true
+    },
+    // 当设置小数位数并且录入类型为数字时，执行格式化和补0
+    decimalPlace: {
+      type: String,
+      default: null
+    },
+    dictType: {
+      type: String,
+      default: ''
+    },
+    value: {
+      type: String,
+      default: ""
+    },
+    attributeValue: {
+      type: [String,Boolean],
+      default: ''
+    },
+    attributeValueCode: {
+      type: String,
+      default: ''
+    },
+  },
+  data() {
+    return {
+      stateValue: '',
+    }
+  },
+  created() {
+    this.setStateValue(this.keyInTypeCode === KEY_IN_TYPE_CODE.SELECT_ENUM ? this.attributeValueCode : this.attributeValue);
+  },
+  methods: {
+    formatInput() {
+      const decimalPlace = this.decimalPlace || 0; // 默认小数位数为0
+      // 格式化输入值
+      this.stateValue = this.stateValue
+        .replace(/[^\d.]/g, '') // 只保留数字和小数点
+        .replace(/^0+(?=\d)/, ''); // 去除前导0
+      const parts = this.stateValue.split('.');
+      if(!parts[0].length){
+        parts[0] = "0";
+      }
+      if (decimalPlace === 0) {
+        // 小数位数为0，只保留整数部分
+        this.stateValue = parts[0];
+      } else  {
+        if (parts.length === 1) {
+          parts[1] = ''
+        }
+        // 处理小数部分
+        parts[1] = parts[1].slice(0, decimalPlace); // 限制小数位数
+
+        // 自动补零
+        while (parts[1].length < decimalPlace) {
+          parts[1] += '0';
+        }
+        // 重新组合值
+        this.stateValue = parts[0] + '.' + parts[1];
+      }
+    },
+    setStateValue(val) {
+      if(typeof val === 'boolean') {
+        this.stateValue = val.toString()
+      }else{
+        this.stateValue = val
+      }
+    },
+    change(val, option) {
+
+      if(this.keyInTypeCode === KEY_IN_TYPE_CODE.INPUT_NUMBER && this.decimalPlace != null){
+        this.formatInput();
+        val = this.stateValue;
+      }
+
+      if (this.keyInTypeCode === KEY_IN_TYPE_CODE.SELECT_ENUM) {
+        this.$emit('attributeValueCodeChange', val)
+        this.$emit('attributeValueChange', option['dictLabel'])
+      } else {
+        this.$emit('attributeValueChange', val)
+      }
+      this.$emit('change', val, option)
+    },
+  },
+};
+</script>

package/components/input/ScaleInputNumber.vue

@@ -0,0 +1,78 @@
+<template>
+  <el-input-number v-model="stateValue" :precision="precision" v-bind="$attrs" @change="change"></el-input-number>
+</template>
+
+<script>
+import {SCALE_TYPE} from "@/constant/bd";
+import {
+  getAmountScaleByCurrencyId,
+  getPriceScaleByCurrencyId,
+  getUomScaleByUomNo
+} from "@utils/cache/bdCache";
+
+
+export default {
+  name: 'ScaleInputNumber',
+  props: {
+    type: {
+      type: String,
+      required: true
+    },
+    scaleNo: {
+      type: String
+    },
+    currencyId: {
+      type: String,
+    },
+    value: {
+      type: [String, Number],
+      default: '0'
+    }
+  },
+  watch: {
+    value: {
+      handler(val) {
+        if (typeof val == 'string') {
+          val = Number(val)
+        }
+        this.stateValue = val
+      },
+      immediate: true
+    }
+  },
+  data() {
+    return {
+      step: 1,
+      min: 0,
+      max: 1000000,
+      precision: 0,
+      stateValue: 0
+    };
+  },
+  created() {
+    this.setPrecision();
+  },
+  methods: {
+    change(val) {
+      this.$emit('input', val)
+      this.$emit('change', val)
+    },
+    setPrecision() {
+      switch (this.type) {
+        case SCALE_TYPE.UOM:
+          console.log(getUomScaleByUomNo(this.scaleNo));
+          this.precision = getUomScaleByUomNo(this.scaleNo).scale;
+          break;
+        case SCALE_TYPE.AMOUNT:
+          console.log(getAmountScaleByCurrencyId(this.currencyId));
+          this.precision = getAmountScaleByCurrencyId(this.currencyId).scale;
+          break;
+        case SCALE_TYPE.PRICE:
+          console.log(getPriceScaleByCurrencyId(this.currencyId));
+          this.precision = getPriceScaleByCurrencyId(this.currencyId).scale;
+          break;
+      }
+    },
+  },
+};
+</script>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "kz-ui-base",
-  "version": "1.0.61",
+  "version": "1.0.63",
   "description": "",
   "main": "index.js",
   "scripts": {