erp_wdly/src/views/system/tenant/index.vue

<template>
  <div class="tenant">
    <!-- <Banner /> -->
    <div class="content">
      <byTable
        :source="sourceList.data"
        :pagination="sourceList.pagination"
        :config="config"
        :loading="loading"
        highlight-current-row
        :selectConfig="selectConfig"
        :table-events="{
          //element talbe事件都能传
          select: select,
        }"
        :action-list="[
          {
            text: '权限配置',
            plain: true,
            //type: 'warning',
            action: () => openRoomModal(),
            disabled: selection.data.length != 1,
          },
          {
            text: '添加租户',
            action: () => openModal('add'),
          },
        ]"
        @get-list="getList">
        <template #slotName="{ item }">
          {{ item.createTime }}
        </template>
      </byTable>
    </div>
    <el-dialog :title="modalType == 'add' ? '新增' : '编辑'" v-model="dialogVisible" width="800" v-loading="loading">
      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform"> </byForm>
      <template #footer>
        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitForm('byform')" size="large" :loading="submitLoading">确 定</el-button>
      </template>
    </el-dialog>

    <el-dialog title="权限配置" v-if="roomDialogVisible" v-model="roomDialogVisible" width="500" :before-close="handleClose" v-loading="loading">
      <el-tree :data="treeData" show-checkbox node-key="id" :default-checked-keys="formData.treeData" :props="defaultProps" ref="tree"> </el-tree>
      <template #footer>
        <el-button @click="roomDialogVisible = false" size="large">取 消</el-button>
        <el-button type="primary" @click="submitTree()" size="large" :loading="submitLoading">确 定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
/* eslint-disable vue/no-unused-components */
import { ElMessage, ElMessageBox } from "element-plus";
import byTable from "@/components/byTable/index";
import byForm from "@/components/byForm/index";
import { computed, defineComponent, ref } from "vue";
const loading = ref(false);
const submitLoading = ref(false);
const defaultProps = {
  children: "children",
  label: "label",
};
const tree = ref(null);
const sourceList = ref({
  data: [],
  pagination: {
    total: 3,
    pageNum: 1,
    pageSize: 10,
  },
});
let dialogVisible = ref(false);
let roomDialogVisible = ref(false);
let modalType = ref("add");
let rules = ref({
  tenantId: [{ pattern: /^\w+$/, message: "请输入正确的租户号，禁止下划线外的其他符号，不区分大小写" }],
  password: [{ required: true, message: "请输入密码", trigger: "blur" }],
  enterpriseName: [{ required: true, message: "请输入企业名称", trigger: "blur" }],
});
const { proxy } = getCurrentInstance();
const selectConfig = computed(() => {
  return [
    {
      label: "审核状态",
      prop: "flowStatus",
      data: [
        {
          label: "审核中",
          value: "1",
        },
        {
          label: "审核通过",
          value: "2",
        },
        {
          label: "审核不通过",
          value: "3",
        },
      ],
    },
    {
      label: "启用状态",
      prop: "status",
      data: [
        {
          label: "启用",
          value: "1",
        },
        {
          label: "禁用",
          value: "0",
        },
      ],
    },
  ];
});
const config = computed(() => {
  return [
    {
      type: "selection",
      attrs: {
        label: "多选",
        prop: "remark",
      },
    },
    {
      attrs: {
        label: "企业名称",
        prop: "enterpriseName",
      },
    },
    {
      attrs: {
        label: "租户id",
        prop: "tenantId",
        align: "center",
      },
    },
    {
      attrs: {
        label: "已创建账号数",
        prop: "accountCount",
        align: "center",
      },
    },
    {
      attrs: {
        label: "审核状态",
        width: 100,
        prop: "flowStatus",
      },
      render(flowStatus) {
        //1审核中 2审核通过 3审核不通过
        return flowStatus == 1 ? "审核中" : flowStatus == 2 ? "审核通过" : "审核不通过";
      },
    },
    {
      attrs: {
        label: "启用状态",
        prop: "status",
      },
      render(status) {
        return status ? "启用" : "禁用";
      },
    },
    {
      attrs: {
        label: "操作",
        width: "200",
        align: "right",
      },
      // 渲染 el-button，一般用在最后一列。
      renderHTML(row) {
        return [
          // {
          //   attrs: {
          //     label: "修改",
          //     type: "primary",
          //     text: true,
          //   },
          //   el: "button",
          //   click() {
          //     getDtl(row);
          //   },
          // },
          {
            attrs: {
              label: row.status == 1 ? "禁用" : "启用",
              type: "primary",
              text: true,
            },
            el: "button",
            click() {
              changeStatus(row);
            },
          },
          // {
          //   attrs: {
          //     label: "发布",
          //     type: "primary",
          //     text: true,
          //     bg: true,
          //   },
          //   el: "button",
          //   click() {
          //     setPublish(row);
          //   },
          // },

          // {
          // 	attrs: {
          // 		label: '删除',
          // 		type: 'danger',
          // 		text: true,
          // 		disabled:true,
          // 	},
          // 	el: 'button',
          // 	click() {
          // 		// 弹窗提示是否删除
          // 		ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
          // 			confirmButtonText: '确定',
          // 			cancelButtonText: '取消',
          // 			type: 'warning',
          // 		})
          // 			.then(() => {
          // 				// 删除
          // 				proxy.post('/tenantInfo/delete', {
          // 					id: row.id,
          // 				}).then((res) => {
          // 					ElMessage({
          // 						message: '删除成功',
          // 						type: 'success',
          // 					})
          // 					getList()
          // 				})
          // 			})
          // 	},
          // },
        ];
      },
    },
  ];
});

let formData = reactive({
  data: {},
  treeData: [],
});
const formOption = reactive({
  inline: true,
  labelWidth: 100,
  itemWidth: 100,
  rules: [],
});
const byform = ref(null);
const treeData = ref([]);
const formConfig = computed(() => {
  return [
    {
      type: "input",
      prop: "tenantId",
      label: "租户id",
      required: true,
      itemWidth: 100,
      //disabled:true,
      itemType: "text",
    },
    {
      type: "input",
      prop: "enterpriseName",
      label: "企业名称",
      maxlength: 50,
    },
    {
      type: "radio",
      prop: "status",
      label: "启用状态",
      border: true,
      data: [
        {
          label: "启用",
          value: 1,
        },
        {
          label: "禁用",
          value: 0,
        },
      ],
    },
    {
      type: "title",
      title: "管理员信息",
    },
    {
      type: "input",
      itemType: "password",
      prop: "password",
      label: "密码",
    },
  ];
});
const getList = async (req) => {
  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
  loading.value = true;
  proxy.post("/tenantInfo/page", sourceList.value.pagination).then((message) => {
    sourceList.value.data = message.rows;
    sourceList.value.pagination.total = message.total;
    setTimeout(() => {
      loading.value = false;
    }, 200);
  });
};
const openModal = () => {
  dialogVisible.value = true;
  modalType.value = "add";
  formData.data = {};
};
const selection = ref({
  data: [],
});
const select = (_selection, row) => {
  selection.value.data = _selection;
};
const getSubset = (list, data) => {
  for (let i = 0; i < list.length; i++) {
    if (list[i].children && list[i].children.length > 0) {
      getSubset(list[i].children, data);
    } else {
      data.push(list[i].id);
    }
  }
  return data;
};
const openRoomModal = () => {
  proxy.get("/tenantInfo/roleMenuTreeSelect/" + selection.value.data[0].tenantId).then((res) => {
    if (res.code == 200) {
      treeData.value = res.menus;
      let data = getSubset(res.menus, []);
      formData.treeData = res.checkedKeys.filter((item) => {
        return data.some((i) => item == i);
      });
      roomDialogVisible.value = true;
    }
  });
};
const noRepeat = (arr) => {
  var newArr = [...new Set(arr)];
  return newArr;
};
const submitTree = () => {
  let data = noRepeat(tree.value.getHalfCheckedKeys().concat(tree.value.getCheckedKeys()));
  if(data.length == 0) {
    ElMessage({
      message: "请至少选择一个菜单",
      type: "error",
    });
    return;
  }
  proxy
    .post("/tenantInfo/bindingMenu", {
      tenantId: selection.value.data[0].tenantId,
      menuIdList: data,
    })
    .then((res) => {
      ElMessage({
        message: "保存成功",
        type: "success",
      });
      roomDialogVisible.value = false;
    });
};
const submitForm = () => {
  byform.value.handleSubmit((valid) => {
    submitLoading.value = true;
    proxy
      .post("/tenantInfo/" + modalType.value, formData.data)
      .then((res) => {
        ElMessage({
          message: modalType.value == "add" ? "添加成功" : "编辑成功",
          type: "success",
        });
        dialogVisible.value = false;
        submitLoading.value = false;
        getList();
      })
      .catch((err) => {
        submitLoading.value = false;
      });
  });
};

const getDtl = (row) => {
  proxy.post("/tenantInfo/detail", { id: row.id }).then((res) => {
    formData.data = res;
    modalType.value = "edit";
    dialogVisible.value = true;
  });
};

const changeStatus = (row) => {
  modalType.value = "edit";
  let status = row.status ? 0 : 1;
  proxy.post("/tenantInfo/detail", { id: row.id }).then((res) => {
    res.status = status;
    formData.data = res;
    ElMessageBox.confirm("你是否确认此操作?", "提示", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
      // 删除
      proxy.post("/tenantInfo/" + modalType.value, formData.data).then((res) => {
        ElMessage({
          message: "操作成功",
          type: "success",
        });
        getList();
      });
    });
  });
};
getList();
</script>

<style lang="scss" scoped>
.tenant {
  padding: 20px;
}
</style>