kz-ui-base 1.0.76 → 1.0.78

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

@@ -1,383 +1,383 @@
-<template>
-  <!-- 添加或修改参数配置对话框 -->
-  <el-dialog
-    :title="setting.title"
-    :visible.sync="setting.isShow"
-    :width="width"
-    :close-on-click-modal="false"
-    append-to-body
-    v-dialogDrag
-    v-dialogDragHeight
-    :before-close="cancel"
-    v-if="dialogShow"
-  >
-    <!-- custom-class="customDialog" -->
-    <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 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>
-    </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, 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: {
-    //微服务模块名称
-    moduleName: {
-      type: String,
-      default: function () {
-        return undefined;
-      },
-    },
-    //实体名称-服务名称
-    serviceName: {
-      type: String,
-      default: function () {
-        return undefined;
-      },
-    },
-    setting: {
-      type: Object,
-      default: function () {
-        return {
-          pkField: "id",
-          // 提交状态
-          submitLoading: false,
-          // 弹出层标题
-          title: "",
-          // 是否显示弹出层
-          isShow: false,
-          // 保存时是否自动关闭
-          isCloseOnSave: true,
-        };
-      },
-    },
-    // 列信息
-    columns: {
-      type: Array,
-      default: function () {
-        return [
-          //{ key: 0, text: `用户编码`, property: "userNo", visible: true },
-          //{ key: 1, text: `用户账号`, property: "userAccount", visible: true },
-        ];
-      },
-    },
-    // 表单参数
-    entity: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
-    // 表单校验
-    rules: {
-      type: Object,
-      default: function () {
-        return {};
-      },
-    },
-    //编辑界面自定义按钮菜单 - 若无自定义按钮，不需要重写
-    customOpMenus: {
-      type: Array,
-      default: function () {
-        return [
-          //{ name: "custom1", visable: true, icon: "ion-plus-round", text: "自定义1" }
-        ];
-      },
-    },
-    //
-    areaSetting: {
-      type: Object,
-      default: function () {
-        return {}
-      },
-    },
-    dialogShow: {
-      type: Object,
-      default: function () {
-        return true
-      },
-    },
-  },
-  data() {
-    return {
-      //表格宽度
-      width: this.setting.width || "60%",
-      //input框宽度
-      labelWidth: this.setting.labelWidth || "100px",
-      items:[],
-      listData:[],
-      listDataShow:false,
-    };
-  },
-  watch: {},
-  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");
-  },
-  methods: {
-    //当前绑定实体字段值变更事件
-    onChangeEvent(args) {
-      this.$emit("change", args);
-    },
-
-    show() {
-      this.setting.isShow = true;
-    },
-    updateMethod(value) {
-      this.items = value;
-    },
-    // 取消按钮
-    cancel() {
-      this.setting.isShow = false;
-      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");
-    },
-    /** 提交按钮 */
-    submitForm: function () {
-      var self = this;
-      this.setting.submitLoading = true;
-
-      // (this.$refs["TableForm"]).$refs['entity']
-      //   .validate((valid) => {
-
-      //   });
-      (this.$refs["entity"]).validate((valid) => {
-        if (valid) {
-          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;
-        }
-      });
-    },
-    /** 自定义操作菜单按钮点击处理 */
-    handleCustomOpMenuClick(opMenu) {
-      this.$emit("onCustomOpMenuClick", {
-        opMenu: opMenu,
-        data: this.entity,
-        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>
+<template>
+  <!-- 添加或修改参数配置对话框 -->
+  <el-dialog
+    :title="setting.title"
+    :visible.sync="setting.isShow"
+    :width="width"
+    :close-on-click-modal="false"
+    append-to-body
+    v-dialogDrag
+    v-dialogDragHeight
+    :before-close="cancel"
+    v-if="dialogShow"
+  >
+    <!-- custom-class="customDialog" -->
+    <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 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>
+    </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, 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: {
+    //微服务模块名称
+    moduleName: {
+      type: String,
+      default: function () {
+        return undefined;
+      },
+    },
+    //实体名称-服务名称
+    serviceName: {
+      type: String,
+      default: function () {
+        return undefined;
+      },
+    },
+    setting: {
+      type: Object,
+      default: function () {
+        return {
+          pkField: "id",
+          // 提交状态
+          submitLoading: false,
+          // 弹出层标题
+          title: "",
+          // 是否显示弹出层
+          isShow: false,
+          // 保存时是否自动关闭
+          isCloseOnSave: true,
+        };
+      },
+    },
+    // 列信息
+    columns: {
+      type: Array,
+      default: function () {
+        return [
+          //{ key: 0, text: `用户编码`, property: "userNo", visible: true },
+          //{ key: 1, text: `用户账号`, property: "userAccount", visible: true },
+        ];
+      },
+    },
+    // 表单参数
+    entity: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    // 表单校验
+    rules: {
+      type: Object,
+      default: function () {
+        return {};
+      },
+    },
+    //编辑界面自定义按钮菜单 - 若无自定义按钮，不需要重写
+    customOpMenus: {
+      type: Array,
+      default: function () {
+        return [
+          //{ name: "custom1", visable: true, icon: "ion-plus-round", text: "自定义1" }
+        ];
+      },
+    },
+    //
+    areaSetting: {
+      type: Object,
+      default: function () {
+        return {}
+      },
+    },
+    dialogShow: {
+      type: Object,
+      default: function () {
+        return true
+      },
+    },
+  },
+  data() {
+    return {
+      //表格宽度
+      width: this.setting.width || "60%",
+      //input框宽度
+      labelWidth: this.setting.labelWidth || "100px",
+      items:[],
+      listData:[],
+      listDataShow:false,
+    };
+  },
+  watch: {},
+  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");
+  },
+  methods: {
+    //当前绑定实体字段值变更事件
+    onChangeEvent(args) {
+      this.$emit("change", args);
+    },
+
+    show() {
+      this.setting.isShow = true;
+    },
+    updateMethod(value) {
+      this.items = value;
+    },
+    // 取消按钮
+    cancel() {
+      this.setting.isShow = false;
+      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");
+    },
+    /** 提交按钮 */
+    submitForm: function () {
+      var self = this;
+      this.setting.submitLoading = true;
+
+      // (this.$refs["TableForm"]).$refs['entity']
+      //   .validate((valid) => {
+
+      //   });
+      (this.$refs["entity"]).validate((valid) => {
+        if (valid) {
+          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;
+        }
+      });
+    },
+    /** 自定义操作菜单按钮点击处理 */
+    handleCustomOpMenuClick(opMenu) {
+      this.$emit("onCustomOpMenuClick", {
+        opMenu: opMenu,
+        data: this.entity,
+        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>