ly-front/src/views/menuData/PermissionDialog.vue

<template>
  <div class="user">
    <div class="demo-formName">
      <my-form
        :formNewList="formList"
        :fromItem="formItem"
        @headdenForm="headdenForm"
        @onMounted="onMountedForm"
        ref="myForm"
        :labelWidth="'110px'"
      >
      </my-form>
    </div>
    <div class="count">
      <el-button
        type="primary"
        icon="el-icon-search"
        @click="headdenForm({ page: 1, pageSize: 10 }, 'search')"
      >
        查询
      </el-button>
      <el-button
        type="primary"
        icon="el-icon-plus"
        @click="headdenForm({}, 'add')"
      >
        新增
      </el-button>
    </div>
    <div class="table-container">
      <my-table
        :tableData="tableData"
        :coloumData="coloumData"
        isShowPagination
        :paginationParam="paginationParam"
        @changeSize="handleSizeChange"
        @changePage="handlePageChange"
      >
        <template #operate="{ data }">
          <el-link
            type="primary"
            :underline="false"
            @click="handleClick(data, 'edit')"
            v-if="data.name !== 'admin'"
          >
            修改
          </el-link>
          <el-link
            type="danger"
            :underline="false"
            @click="handleClick(data, 'delete')"
            v-if="data.name !== 'admin'"
          >
            删除
          </el-link>
        </template>
      </my-table>
    </div>
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      append-to-body
      direction="rtl"
    >
      <div class="demo-drawer__content">
        <my-form
          :formNewList="formDrawerList"
          :fromItem="fromItem"
          dialogImageUrl
          @determine="determine"
          @handleClose="handleClose"
          labelWidth="120px"
        >
        </my-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
"use script";
import { userList, userAdd, userUpdate, userDelete } from "@/api/user.js";
export default {
  name: "webDevice",
  data() {
    return {
      defaultImg: require("@/assets/img/nopic.png"),
      formList: [
        {
          label: "账号",
          type: "input",
          model: "key"
        }
      ],
      formItem: {},
      formDrawerList: [
        {
          label: "账号",
          type: "input",
          model: "name",
          rules: [{ required: true, message: "请输入账号" }],
          disabled: true
        },
        {
          label: "密码",
          type: "input",
          model: "password",
          rules: [{ required: true, message: "请输入密码" }],
          showPassword: true,
          disabled: true,
          show: false
        },
        {
          label: "是否管理员",
          type: "select",
          model: "isAdmin",
          options: [
            {
              label: "是",
              key: true
            },
            {
              label: "否",
              key: false
            }
          ]
        }
      ],
      tableData: [],
      coloumData: [
        {
          label: "账号",
          prop: "name",
          align: "center"
        },
        {
          label: "是否管理员",
          prop: "isAdmin",
          align: "center"
        },
        {
          slot: "operate",
          label: "操作",
          width: 250,
          fixed: "right"
        }
      ],
      paginationParam: {
        currentPage: 1,
        size: 10,
        total: 0
      },
      drawer: false,
      title: "",
      fromItem: {},
      deviceType: [],
      PositionList: [],
      historyList: [],
      isType: ""
    };
  },
  mounted() {
    this.headdenForm({}, "search");
  },
  methods: {
    getStatusStyle(value) {
      return {
        color: value == 0 ? "green" : "red"
      };
    },
    // 最大健康值 默认显示
    onMountedForm() {
      this.$forceUpdate();
    },
    // 关闭抽屉
    handleClose() {
      this.drawer = false;
    },
    // 新增 搜索
    headdenForm(value, type) {
      let params = {};
      if (type === "add") {
        this.isType = "add";
        this.title = "新增人员";
        this.fromItem = {};
        this.formDrawerList[0].disabled = false;
        this.formDrawerList[1].disabled = false;
        this.formDrawerList[1].show = true;
        this.drawer = true;
      } else if (type === "search") {
        params = JSON.parse(JSON.stringify(this.$refs.myForm.ruleForm));
        params.pageNum = this.paginationParam.currentPage;
        params.pageSize = this.paginationParam.size;
        userList(params).then((res) => {
          if (res.code === 0) {
            this.tableData = res.data.items.map((item) => {
              const { ...rest } = item;
              return {
                ...rest,
                isAdmin: item.isAdmin ? "是" : "否"
              };
            });
            this.paginationParam.total = res.data.total;
          }
        });
      }
      console.log(value);
    },
    // 停用 编辑 删除
    handleClick(value, type) {
      if (type === "edit") {
        this.isType = "edit";
        this.title = "编辑人员";
        this.fromItem = value;
        this.formDrawerList[0].disabled = true;
        this.formDrawerList[1].disabled = true;
        this.formDrawerList[1].show = false;
        this.drawer = true;
      } else if (type === "delete") {
        this.$confirm("此操作将永久删除该人员, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            userDelete([value.id]).then((res) => {
              if (res.code === 0) {
                this.$message.success("删除成功");
                this.headdenForm({}, "search");
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    // 确定按钮
    determine(value) {
      let params = {};
      params = value;
      params.isAdmin = JSON.parse(params.isAdmin);
      console.log(params, "params");
      if (this.isType === "add") {
        //   console.log("新增");
        userAdd(params)
          .then((res) => {
            if (res.code === 0) {
              this.$message.success("新增成功");
              this.headdenForm({}, "search");
            }
          })
          .catch((err) => {
            console.log(err);
          });
      } else if (this.isType === "edit") {
        userUpdate(params).then((res) => {
          if (res.code === 0) {
            this.$message.success("编辑成功");
            this.headdenForm({}, "search");
          }
        });
      }
      this.drawer = false;
    },
    handleSizeChange(value) {
      console.log(value);
      this.paginationParam.size = value;
      this.headdenForm({}, "search");
    },
    handlePageChange(value) {
      console.log(value);
      this.paginationParam.currentPage = value;
      this.headdenForm({}, "search");
    }
  }
};
</script>
<style scoped lang="scss">
.user {
  width: 95%;
  height: 100%;
  padding: 20px;
  position: relative;
}
</style>