mdm-client 1.0.0

package/src/components/other/customGroupDialog.vue

@@ -0,0 +1,180 @@
+<template>
+  <div>
+    <el-dialog
+      :visible.sync="visible"
+      :show-close="false"
+      append-to-body
+      class="custom-group-dialog"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+    >
+      <div slot="title" class="dialog-title">
+        自定义分组
+        <span class="close-icon" @click="close"></span>
+      </div>
+      <el-form ref="formRef" :model="form" :rules="rules" class="custom-form">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="form.name" maxlength="30" placeholder="请输入" />
+        </el-form-item>
+        <el-form-item label="排序号" prop="sort">
+          <el-input v-model="form.sort" type="number" :min="0" placeholder="请输入" />
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <div class="btn btn-plain" @click="close">取消</div>
+          <div class="btn btn-primary" v-throttle-click:500="submit">确定</div>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+import { addUserAndCommonGroup, ShowMessage } from "@/utils/index";
+
+export default {
+  name: "CustomGroupDialog",
+  props: {
+    baseUrl: {
+      type: String,
+      default: "",
+    },
+    token: {
+      type: String,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      visible: false,
+      form: {
+        name: "",
+        sort: "0",
+        chosenList: [],
+      },
+      rules: {
+        name: [{ required: true, message: "请输入名称", trigger: "blur" }],
+        sort: [{ required: true, message: "请输入排序号", trigger: "blur" }],
+      },
+      showMessage: new ShowMessage()
+    };
+  },
+  methods: {
+    open(chosenList) {
+      this.visible = true;
+      this.form.name = "";
+      this.form.sort = "";
+      this.form.chosenList = chosenList;
+    },
+    close() {
+      this.visible = false;
+      this.$emit("refreshCommonGroupTree");
+    },
+    addGroup() {
+      return new Promise((resolve, reject) => {
+        addUserAndCommonGroup({
+          groupName: this.form.name,
+          order: Number(this.form.sort),
+          user: this.form.chosenList.map(item => {
+            return {
+              userID: item.id,
+              userName: item.label,
+              phone: item.phone,
+              loginCode: item?.loginCode ? item.loginCode : ""
+            }
+          }),
+        }, {
+          baseUrl: this.baseUrl,
+          token: this.token,
+        }).then(res => {
+          if(res.data?.code == 200) {
+            resolve();
+          } else {
+            reject(new Error(res.data?.msg || "添加失败"));
+          }
+        }).catch(err => {
+          reject(new Error("添加失败"));
+        })
+      })
+    },
+    submit() {
+      this.$refs.formRef.validate((valid) => {
+        if (valid) {
+          // 提交逻辑
+          this.addGroup().then(() => {
+            this.close();
+          }).catch(err => {
+            this.showMessage.error(err.message);
+          })
+        }
+      });
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+@import "../../assets/style/mixin.scss";
+
+:deep(.el-dialog) {
+  width: 510px !important;
+  border-radius: 12px;
+  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.4);
+  @include dialog;
+}
+
+:deep(.el-form) {
+  margin-top: 40px;
+  .el-form-item {
+    margin-bottom: 20px;
+    .el-form-item__label {
+      width: 165px;
+      padding-right: 20px;
+    }
+    .el-form-item__content {
+      flex: none;
+      width: 281px;
+    }
+    .el-input {
+      width: 100%;
+    }
+  }
+}
+
+.custom-group-dialog {
+  .dialog-title {
+    display: flex;
+    align-items: center;
+    width: 100%;
+    justify-content: space-between;
+    .close-icon {
+      width: 16px;
+      height: 16px;
+      background: var(--close-icon) no-repeat center center / 100% 100%;
+      cursor: pointer;
+    }
+  }
+  .dialog-footer {
+    display: flex;
+    justify-content: center;
+    padding-bottom: 40px;
+    .btn {
+      width: 100px;
+      height: 36px;
+      @include button;
+      &.btn-primary {
+        @include btnPrimary;
+      }
+      &.btn-plain {
+        border: 1px solid var(--btn-primary-bg);
+        color: var(--btn-primary-bg);
+        background: transparent;
+      }
+      &:not(:last-child) {
+        margin-right: 16px;
+      }
+    }
+  }
+}
+</style>