jintan-canlian-web/src/views/system/menu.vue

<template>
  <div class="container">
    <!-- 查询配置 -->
    <div>
      <div ref="lxHeader">
        <LxHeader
          icon="md-apps"
          text="菜单管理"
          style="margin-bottom: 10px; border: 0px; margin-top: 15px"
        >
          <div slot="content"></div>
          <slot>
            <div>
              <Input
                style="width: 200px; margin-right: 10px"
                v-model.number="searchFields.Name"
                placeholder="关键字搜索"
              />
              <Button type="primary" @click="load" style="margin-left: 10px"
                >查询</Button
              >
              <Button type="primary" @click="edit()" style="margin-left: 10px"
                >新增菜单</Button
              >
            </div>
          </slot>
        </LxHeader>
      </div>
      <div class="table-tree">
        <el-table
          :data="tableData"
          :height="tableHeight"
          class="v-table"
          style="width: 100%; margin-bottom: 20px"
          row-key="id"
          border
          default-expand-all
          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
        >
          <el-table-column type="index" align="center"> </el-table-column>
          <el-table-column prop="name" label="菜单" sortable width="180">
          </el-table-column>
          <el-table-column prop="url" label="菜单路径" sortable>
          </el-table-column>
          <el-table-column prop="path" label="路由" sortable> </el-table-column>
          <el-table-column prop="icon" label="图标" sortable> </el-table-column>
          <el-table-column prop="api_prefix" label="API前缀" sortable>
          </el-table-column>
          <el-table-column prop="sortnumber" label="排序" sortable>
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="300">
            <template slot-scope="scope">
              <Button
                type="primary"
                @click="addchildren(scope.row)"
                size="small"
                style="margin-left: 10px"
                ghost
                >子菜单</Button
              >
              <Button
                type="error"
                @click="del(scope.row)"
                size="small"
                style="margin-left: 10px"
                ghost
                >删除</Button
              >
              <Button
                type="primary"
                @click="edit(scope.row)"
                size="small"
                style="margin-left: 10px"
                ghost
                >编辑</Button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>

    <el-dialog title="菜单编辑" :visible.sync="dialogFormVisible" width="60%">
      <el-form
        :model="form"
        :rules="rules"
        ref="form"
        label-position="right"
        :label-width="formLabelWidth"
      >
        <el-row>
          <el-col :span="12">
            <el-form-item label="父菜单">
              <el-input
                v-model="form.pname"
                disabled
                autocomplete="off"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="名称" prop="name">
              <el-input v-model="form.name" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="18">
            <el-form-item label="菜单路径" prop="url">
              <el-input v-model="form.url" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="路由" prop="path">
              <el-input v-model="form.path" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="18">
            <el-form-item label="表单">
              <el-select value-key="id" v-model="selectCustomForm">
                <el-option
                  v-for="item in customForms"
                  :key="item.id"
                  :value="item"
                  :label="item.name"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="API前缀" prop="api_prefix">
              <el-input v-model="form.api_prefix" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="排序">
              <el-input v-model="form.sortnumber" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12">
            <el-form-item label="是否显示" prop="visible">
              <el-select v-model="form.visible">
                <el-option label="显示" value="1"></el-option>
                <el-option label="不显示" value="0"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="图标" prop="icon">
              <el-input v-model="form.icon" autocomplete="off"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <div
              style="
                display: flex;
                align-items: center;
                justify-content: space-between;
              "
            >
              <el-form-item label="操作权限" prop="auth_node_tags">
                <el-checkbox-group v-model="form.auth_node_tagsArr">
                  <el-checkbox
                    :label="item.tag"
                    v-for="(item, index) of list"
                    :key="item.id"
                  >
                    {{ item.name }}
                  </el-checkbox>
                </el-checkbox-group>
              </el-form-item>
              <el-button size="small" @click="dialogOptFormVisible = true" round
                >新增</el-button
              >
            </div>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('form')">取 消</el-button>
        <el-button type="primary" @click="submitForm('form')">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog
      title="操作新增"
      :visible.sync="dialogOptFormVisible"
      width="30%"
    >
      <el-form
        :model="actionForm"
        :rules="actionRules"
        ref="actionForm"
        label-position="right"
        :label-width="formLabelWidth"
      >
        <el-form-item label="标识" prop="tag">
          <el-input v-model="actionForm.tag" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="名称" prop="name">
          <el-input v-model="actionForm.name" autocomplete="off"> </el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="resetForm('actionForm')">取 消</el-button>
        <el-button type="primary" @click="saveAuthForm('actionForm')"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>
<script>
import LxHeader from "@/components/LxHeader/index.vue";
import { save, listmenu, del } from "@/api/system/menu";
import { index } from "@/api/system/customForm";
import { store as storeAuth, list, del as delAuth } from "@/api/system/auth.js";

export default {
  components: {
    LxHeader,
  },
  created() {
    this.getCustomForms();
    this.initLoad();
    this.load();
  },
  mounted() {},
  data() {
    return {
      selectCustomForm: "",
      customForms: [],
      dialogOptFormVisible: false,
      dialogFormVisible: false,
      formLabelWidth: "120px",
      form: {
        name: "",
        id: "",
        pid: "0",
        url: "",
        visible: "1",
        sortnumber: 0,
        icon: "",
        pname: "根菜单",
        api_prefix: "",
        auth_node_tagsArr: [],
        auth_node_tags: "",
        path: "",
      },
      actionRules: {
        tag: [
          {
            required: true,
            message: "请输入标识",
            trigger: "blur",
          },
        ],
        name: [
          {
            required: true,
            message: "请输入名称",
            trigger: "blur",
          },
        ],
      },
      rules: {
        name: [
          {
            required: true,
            message: "请输入菜单名称",
            trigger: "blur",
          },
        ],
        url: [
          {
            required: true,
            message: "请输入菜单路径",
            trigger: "blur",
          },
        ],
        path: [
          {
            required: true,
            message: "请输入路由",
            trigger: "blur",
          },
        ],
        icon: [
          {
            required: true,
            message: "请输入图标",
            trigger: "blur",
          },
        ],
        visible: [
          {
            required: true,
            message: "请选择是否显示",
            trigger: "blur",
          },
        ],
      },
      tableHeight: 0,
      //查询条件字段
      searchFields: {
        KeyWord: "",
      },
      tableData: [],
      list: [],
      actionForm: {
        name: "",
        tag: "",
      },
    };
  },
  methods: {
    async getCustomForms() {
      const res = await index({ page: 1, page_size: 999 });
      this.customForms = res.data;
    },
    saveAuthForm(formName) {
      var that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          storeAuth(that.actionForm)
            .then((response) => {
              console.log(response);
              this.$Message.success("操作成功");
              that.dialogOptFormVisible = false;
              that.loadAuth();
            })
            .catch((error) => {
              reject(error);
            });
        } else {
          this.$Message.error("数据校验失败");
          return false;
        }
      });
    },
    loadAuth() {
      var that = this;
      list({
        page: 1,
      })
        .then((res) => {
          that.list = res.data;
        })
        .catch((error) => {});
    },
    initLoad() {
      var that = this;
      var clientHeight = document.documentElement.clientHeight;
      var lxHeader_height = 96.5; //查询 头部
      var paginationHeight = 37; //分页的高度
      var topHeight = 50; //页面 头部
      let tableHeight =
        clientHeight - lxHeader_height - topHeight - paginationHeight - 20;
      that.tableHeight = tableHeight;
    },
    load() {
      var that = this;
      listmenu()
        .then((response) => {
          that.tableData = response;
        })
        .catch((error) => {
          //reject(error)
        });
    },
    edit(obj) {
      this.form = this.$options.data().form;
      this.loadAuth();
      if (obj) {
        obj.visible = obj.visible.toString();
        if (obj.auth_node_tags)
          this.form.auth_node_tagsArr = obj.auth_node_tags.split(",");
        var result = Object.assign(this.form, obj);
        this.form = result;

        let queryString = this.form.path.split("?")[1];
        // 将参数字符串按照“&”符号分割成数组
        let paramsArray = queryString.split("&");
        // 定义一个空对象用于存储参数名和参数值
        let params = {};
        // 遍历参数数组，将每个参数名和参数值存储在params对象中
        for (let i = 0; i < paramsArray.length; i++) {
          let param = paramsArray[i].split("=");
          let paramName = param[0];
          let paramValue = param[1];
          params[paramName] = paramValue;
        }
        // 获取custom_form_id参数的值
        let customForm = params["custom_form"] ? JSON.parse(decodeURIComponent(params["custom_form"])) : {}
        this.selectCustomForm = this.customForms.find(i => i.id === customForm?.custom_form_id)
      }
      this.dialogFormVisible = true;
    },
    addchildren(obj) {
      this.form = this.$options.data().form;
      if (obj) {
        this.form.pname = obj.name;
        this.form.pid = obj.id;
        this.dialogFormVisible = true;
      }
    },
    replaceCustomFormParam(str, newValue) {
      // 匹配 custom_form 参数及其值
      const regex = /([&?])custom_form=([^&]*)(&|$)/;
      const match = str.match(regex);

      if (match) {
        const before = match[1]; // 匹配到的 "&" 或 "?"
        const after = match[3]; // 匹配到的 "&" 或 ""（如果最后一个参数是 custom_form）
        const oldValue = match[2]; // 匹配到的原始值

        // 替换匹配到的值
        const newStr = str.replace(
          `custom_form=${oldValue}`,
          `custom_form=${newValue}`
        );

        // 如果有 "&" 则保留，否则加上 "&"
        return before ? newStr : `${newStr}&`;
      } else {
        // 如果没有 custom_form 参数，则直接返回原字符串加上新参数
        return str + `&custom_form=${newValue}`;
      }
    },
    submitForm(formName) {
      var that = this;
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (that.selectCustomForm) {
            let temp = encodeURIComponent(
              `{"custom_form_id":${that.selectCustomForm?.id},"table_name":"${that.selectCustomForm?.table_name}"}`
            );
            if (that.form?.path?.includes("?")) {
              if (that.form.path.indexOf("custom_form") === -1) {

                that.form.path += `&custom_form=${temp}`;
              } else {
                that.form.path = that.replaceCustomFormParam(that.form.path,temp);
              }
            } else {
              that.form.path += `?custom_form=${temp}`;
            }
          }
          this.form.auth_node_tags = this.form.auth_node_tagsArr.join(",");
          save(that.form)
            .then((response) => {
              console.log(response);
              this.$Message.success("操作成功");
              that.dialogFormVisible = false;
              that.load();
            })
            .catch((error) => {
              reject(error);
            });
        } else {
          this.$Message.error("数据校验失败");
          return false;
        }
      });
    },
    resetForm(formName) {
      var that = this;
      this.$refs[formName].resetFields();
      if (formName == "form") that.dialogFormVisible = false;
      else that.dialogOptFormVisible = false;
    },
    del(obj) {
      var that = this;
      if (obj) {
        this.$Modal.confirm({
          title: "确认要删除数据？",
          onOk: () => {
            del({
              id: obj.id,
            })
              .then((response) => {
                this.$Message.success("操作成功");
                that.load();
              })
              .catch((error) => {
                console.log(error);
                reject(error);
              });
          },
          onCancel: () => {
            //this.$Message.info('Clicked cancel');
          },
        });
      }
    },
  },
};
</script>