order-ui-pc/src/views/system/menuOperator/addEdit.vue

<template>
  <el-dialog
    v-loading="loading"
    :title="title"
    :center="true"
    align="left"
    top="10vh"
    width="750px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    append-to-body
    @close="closeModel"
  >
    <el-card style="margin-top: -20px">
      <el-form
        ref="ruleForm"
        :model="ruleForm"
        is_show-icon
        :rules="rulesThis"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-row>
          <el-col :span="24">
            <el-form-item v-if="level < 3" label="名称：" prop="name">
              <el-input
                v-model="ruleForm.name"
                :disabled="isDetail"
                placeholder="例如：用户管理"
              />
            </el-form-item>
            <el-form-item v-if="level === 3" label="按钮标识：" prop="code">
              <el-select
                v-model="ruleForm.code"
                placeholder="请选择按钮标识"
                clearable
                filterable
                :disabled="isDetail"
                @change="codeChange"
              >
                <el-option
                  v-for="item in btnList"
                  :key="item.code"
                  :label="item.name"
                  :value="item.code"
                />
              </el-select>
            </el-form-item>
            <el-row>
              <el-col :span="12" v-if="level < 3">
                <el-form-item label="路由：" prop="route">
                  <el-input
                    v-model="ruleForm.route"
                    :disabled="isDetail"
                    placeholder="例如：user"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12" v-if="level < 3">
                <el-form-item label="图标：" prop="img">
                  <el-row :gutter="10">
                    <el-col v-if="ruleForm.img" :span="3" style="width: 45px">
                      <div class="g-block" @click="showIconModel = true">
                        <i :class="ruleForm.img" />
                      </div>
                    </el-col>
                    <el-col v-if="!ruleForm.img" :span="7">
                      <el-button
                        type="warning"
                        size="mini"
                        @click="showIconModel = true"
                      >
                        选择图标
                      </el-button>
                    </el-col>
                  </el-row>
                  <iconDialog
                    :show-model="showIconModel"
                    @setVal="setVal"
                    @cancel="showIconModel = false"
                  />
                </el-form-item>
              </el-col>
            </el-row>
            <el-form-item
              v-if="level === 2"
              label="页面路径："
              prop="component"
            >
              <el-input
                v-model="ruleForm.component"
                :disabled="isDetail"
                placeholder="例如：park/user"
              >
                <template slot="prepend">views/</template>
              </el-input>
            </el-form-item>
            <el-row>
              <el-col :span="12">
                <el-form-item label="状态：" prop="is_show">
                  <el-radio
                    v-model="ruleForm.is_show"
                    :label="'1'"
                    :disabled="isDetail"
                  >
                    启用
                  </el-radio>
                  <el-radio
                    v-model="ruleForm.is_show"
                    :label="'0'"
                    :disabled="isDetail"
                  >
                    禁用
                  </el-radio>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item
                  label="页面状态："
                  v-if="level < 3"
                  prop="is_display"
                >
                  <el-radio
                    v-model="ruleForm.is_display"
                    :label="'1'"
                    :disabled="isDetail"
                  >
                    显示
                  </el-radio>
                  <el-radio
                    v-model="ruleForm.is_display"
                    :label="'0'"
                    :disabled="isDetail"
                  >
                    隐藏
                  </el-radio>
                </el-form-item>
              </el-col>
            </el-row>

            <el-form-item v-if="level < 3" label="排序权重：" prop="weight">
              <el-row :gutter="10">
                <el-col :span="16" style="padding: 0">
                  <el-input
                    v-model.number="ruleForm.weight"
                    type="number"
                    :disabled="isDetail"
                  />
                </el-col>
                <el-col :span="7">
                  <el-tag type="danger">数值越大排名越靠前</el-tag>
                </el-col>
              </el-row>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>

      <el-col :span="24" style="text-align: right;padding:0 0 10px 0">
        <el-button v-if="!isDetail" type="primary" @click="submitForm">
          保 存
        </el-button>
        <el-button @click="showModelThis = false">{{
          isDetail ? "关 闭" : "取 消"
        }}</el-button>
      </el-col>
    </el-card>
  </el-dialog>
</template>

<script>
import asyncRequest from "@/apis/service/system/menu";
import btnList from "@/assets/js/btnList";
import iconDialog from "@/views/system/menuOperator/iconDialog";
import resToken from "@/mixins/resToken";
export default {
  components: {
    iconDialog,
  },
  mixins: [resToken],
  props: [
    "showModel",
    "id",
    "isDetail",
    "parentIds",
    "level",
    "isAdd",
    "type",
    "formData",
  ],
  data() {
    return {
      loading: false,
      showIconModel: false,
      title: "",
      btnList,
      showModelThis: this.showModel,
      ruleForm: {},
      rulesThis: this.rules,
      rules: {
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        code: [
          {
            required: true,
            message: "请输入按钮标识编码（用于判断按钮是否显示）",
            trigger: "change",
          },
        ],
        img: [
          {
            required: true,
            message: "请选择图标",
            trigger: "blur",
          },
        ],
        route: [
          {
            required: true,
            message: "请输入路由",
            trigger: "blur",
          },
          {
            min: 1,
            max: 50,
            message: "长度在 1 到 50 个字符",
            trigger: "blur",
          },
        ],
        component: [
          {
            required: true,
            message: "请输入页面组件路径",
            trigger: "blur",
          },
          {
            min: 1,
            max: 100,
            message: "长度在 1 到 100 个字符",
            trigger: "blur",
          },
        ],
        weight: [
          {
            required: true,
            message: "请输入权重，数值越大排名越靠前",
            trigger: "blur",
          },
        ],
        is_show: [
          {
            required: true,
            message: "请选择状态",
            trigger: "change",
          },
        ],
        is_display: [
          {
            required: true,
            message: "请选择页面状态",
            trigger: "change",
          },
        ],
      },
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    codeChange(code) {
      for (let i = 0; i < this.btnList.length; i++) {
        if (this.btnList[i].code === code) {
          this.ruleForm.name = this.btnList[i].name;
          break;
        }
      }
    },
    setVal(val) {
      this.ruleForm.img = val;
        this.$refs.ruleForm.validateField("img");
    },
    async initForm() {
      if (this.isAdd) {
        if (this.level === 1) {
          this.title = "添加一级菜单";
        } else if (this.level === 2) {
          this.title = "添加二级菜单";
        } else {
          this.title = "添加按钮";
        }
        this.loading = false;
        this.rulesThis = this.rules;
        await this.resetForm();
      } else {
        if (this.isDetail) {
          if (this.level === 1) {
            this.title = "一级菜单详情";
          } else if (this.level === 2) {
            this.title = "二级菜单详情";
          } else {
            this.title = "按钮详情";
          }
          this.rulesThis = {};
        } else {
          if (this.level === 1) {
            this.title = "修改一级菜单";
          } else if (this.level === 2) {
            this.title = "修改二级菜单";
          } else {
            this.title = "修改按钮";
          }
          this.rulesThis = this.rules;
        }
        await this.initData();
      }
    },
    async initData() {
      this.loading = true;
      let parentIds = "";
      if (this.isAdd) {
        if (this.id === 0) {
          parentIds = "0";
        } else {
          parentIds = this.parentIds;
        }
      } else {
        parentIds = this.parentIds;
      }
      const {
        menu_name,
        menu_img,
        menu_route,
        is_show,
        weight,
        status,
        menu_url,
        menuid,
        action_name,
        action_code,
        is_display,
      } = this.formData;

      if (this.level !== 3) {
        // 重置
        this.ruleForm = {
          parentId: this.id + "", // 父级ID（一级为0）
          parentIds: parentIds + "", // 所有父级编号（用逗号分隔）
          name: menu_name + "", // 名称
          code: "", // 编码（用于按钮是否显示）
          img: menu_img + "", // 图标（导航图标）
          route: menu_route + "", // 路由
          component: this.level === 1 ? "" : menu_url + "", // 页面组件
          menuCategory: 1 + "", // 菜单类别（1.导航菜单 2.按钮）
          type: this.type + "", // 类型（1.运营菜单 2.物业菜单）
          is_show: is_show + "", // 状态（1启用 0禁用）
          is_display: is_display + "",
          weight: parseInt(weight + ""), // 权重，越大越靠前
        };
        if (this.level === 1) {
          delete this.ruleForm["parentIds"];
        }
      } else {
        this.ruleForm = {
          parentId: this.id + "", // 父级ID（一级为0）
          parentIds: menuid + "", // 所有父级编号（用逗号分隔）
          name: action_name + "", // 名称
          code: action_code + "", // 编码（用于按钮是否显示）
          img: "", // 图标（导航图标）
          route: "", // 路由
          component: "", // 页面组件
          menuCategory: 2 + "", // 菜单类别（1.导航菜单 2.按钮）
          type: this.type + "", // 类型（1.运营菜单 2.物业菜单）
          is_show: status + "", // 状态（1启用 0禁用）
          weight: 1 + "", // 权重，越大越靠前
        };
      }
      this.loading = false;
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.clearValidate();
        }
      });
    },
    async resetForm() {
      let parentIds = "";
      if (this.isAdd) {
        if (this.id === 0) {
          parentIds = "0";
        } else {
          parentIds = this.parentIds;
        }
      } else {
        parentIds = this.parentIds;
      }

      // 重置
      this.ruleForm = {
        parentId: this.id, // 父级ID（一级为0）
        parentIds, // 所有父级编号（用逗号分隔）
        name: "", // 名称
        code: "", // 编码（用于按钮是否显示）
        img: "", // 图标（导航图标）
        route: "", // 路由
        component: "", // 页面组件
        menuCategory: this.level < 3 ? 1 : 2, // 菜单类别（1.导航菜单 2.按钮）
        type: this.type + "", // 类型（1.运营菜单 2.物业菜单）
        is_show: "1", // 状态（1启用 0禁用）
        is_display: "1", // 页面状态（1显示 0隐藏）
        weight: 1, // 权重，越大越靠前
      };
      await this.$nextTick(() => {
        if (this.$refs.ruleForm) {
          this.$refs.ruleForm.clearValidate();
        }
      });
    },
    async submitForm() {
      if (this.loading) {
        return false;
      }
      this.loading = true;

      await this.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          let model = {};
          let res = {};
          const {
            name,
            img,
            route,
            is_show,
            is_display,
            weight,
            component,
            code,
          } = this.ruleForm;

          model = {
            id: this.id,
            pid: this.parentIds,
            menuid: this.parentIds,
            name: name,
            img: img,
            is_show: is_show,
            weight: weight,
            route: route,
            is_display: is_display,
            url: component,
            action_code: code,
            status: is_show,
          };

          if (this.level === 1) {
            delete model["pid"];
            delete model["menuid"];
            delete model["url"];
            delete model["action_code"];
            delete model["status"];
          } else if (this.level === 2) {
            delete model["menuid"];
            delete model["action_code"];
            delete model["status"];
          } else {
            delete model["pid"];
            delete model["img"];
            delete model["is_show"];
            delete model["weight"];
            delete model["route"];
            delete model["is_display"];
            delete model["url"];
          }
          if (this.isAdd) {
            delete model["id"];
          }
          if (this.level < 3) {
            res = await asyncRequest.update(model);
          } else {
            if (this.isAdd) {
              res = await asyncRequest.actionadd(model);
            } else {
              res = await asyncRequest.actionedit(model);
            }
          }
          this.loading = false;
          if (res && res.code === 0) {
            this.ruleForm = {};
            const title = this.isAdd ? "添加成功" : "修改成功";
            this.$notify.success({
              title,
              message: "",
            });
            this.showModelThis = false;
            let pids = this.parentIds;
            if (this.id === 0) {
              pids = "0";
            }
            this.$emit("refresh", this.id, pids, this.level);
          } else if (res && res.code >= 100 && res.code <= 104) {
            await this.logout();
          } else {
            this.$message.warning(res.message);
          }
        } else {
          this.loading = false;
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.g-block {
  display: inline-block;
  padding: 10px 5px;
  text-align: center;
  border: 1px #ccc dashed;
  margin: 1px;
  font-size: 0px;
  cursor: pointer;
  i {
    font-size: 30px;
    line-height: 30px;
    display: block;
    margin: 0 auto;
    width: 30px;
  }
}
</style>