flat: 6.5 改版

src/views/tenant/main/serveCopy/Dialog/addGroups.vue

@@ -0,0 +1,146 @@
+<template>
+  <!-- 新建分组模板 -->
+  <el-dialog
+    :title="title"
+    append-to-body
+    :visible.sync="box"
+    :close-on-click-modal="false"
+    :close-on-press-escape="false"
+    @closed="closed"
+    width="555px"
+  >
+    <el-form
+      :model="form"
+      @submit.native.prevent
+      :rules="rules"
+      ref="groups"
+      label-position="right"
+      label-width="100px"
+    >
+      <el-form-item label="分组名称" prop="groupName">
+        <el-input v-model="form.groupName" placeholder="请输入 分组名称" size="small" :disabled="loading" maxlength="40" show-word-limit></el-input>
+      </el-form-item>
+    </el-form>
+    <div slot="footer" style="text-align:right">
+      <el-button
+        type="primary"
+        size="mini"
+        icon="el-icon-check"
+        @click="handleSubmit"
+        :loading="loading"
+      >提交</el-button>
+      <el-button size="mini" icon="el-icon-circle-close" @click=" box = false" :loading="loading">取消</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { addDept, updateDept } from "@/api/tenant/serve";
+export default {
+  data() {
+    return {
+      type: "",
+      title: "",
+      groupId: "",
+      loading: false,
+      box: false,
+      form: {
+        groupName: "",
+      },
+      rules: {
+        groupName: [
+          {
+            required: true,
+            whitespace: true,
+            message: "请填写分组名称",
+            trigger: "blur",
+          },
+        ],
+      },
+    };
+  },
+  watch: {},
+  computed: {},
+  methods: {
+    closed() {
+      this.form = {
+        groupName: "",
+      };
+      if (this.$refs.groups) {
+        this.$refs.groups.resetFields();
+      }
+      this.loading = false;
+    },
+    openDialog(type, data) {
+      this.type = type;
+      if (this.type === "add") {
+        this.title = "新建分组";
+        this.box = true;
+      } else if (this.type === "edit") {
+        this.title = "编辑分组";
+        this.groupId = data.id;
+        this.form.groupName = data.groupName;
+        this.box = true;
+      }
+    },
+    handleSubmit() {
+      if(this.form.groupName){
+        this.$refs.groups.validate(valid=>{
+          if(valid){
+            if (this.type === "add") {
+          //提交新建分组接口
+          this.loading = true;
+          addDept({
+            groupName: this.form.groupName,
+          }).then(
+            () => {
+              this.$message({
+                type: "success",
+                message: "操作成功!",
+              });
+              this.box = false;
+              this.$emit("refresh");
+              this.loading = false;
+            },
+            (error) => {
+              window.console.log(error);
+              this.loading = false;
+            }
+          );
+        } else if (this.type == "edit") {
+          //提交编辑分组接口
+          this.loading = true;
+          updateDept({
+            id: this.groupId,
+            groupName: this.form.groupName,
+          }).then(
+            () => {
+              this.$message({
+                type: "success",
+                message: "操作成功!",
+              });
+              this.box = false;
+              this.$emit("refresh");
+              this.loading = false;
+            },
+            (error) => {
+              window.console.log(error);
+              this.loading = false;
+            }
+          );
+        }
+          }
+          else{
+            this.$message.error('请输入分组名称');
+          }
+        })
+      }
+      
+    
+    },
+  },
+};
+</script>
+
+<style>
+</style>