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

<template>
  <div class="dictionary">
    <div class="demo-formName">
      <my-form
        :formNewList="formList"
        :fromItem="formItem"
        @headdenForm="headdenForm"
        searchFive
        ref="myForm"
      >
      </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"
        @selectionChange="handleSelectionChange"
      >
        <template #operate="{ data }">
          <el-link
            type="primary"
            :underline="false"
            @click="handleClick(data, 'edit')"
          >
            修改
          </el-link>
          <el-link
            type="danger"
            :underline="false"
            @click="handleClick(data, 'delete')"
          >
            删除
          </el-link>
        </template>
      </my-table>
    </div>
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      append-to-body
      direction="rtl"
      :wrapperClosable="false"
      :close-on-press-escape="false"
    >
      <div class="demo-drawer__content">
        <my-form
          :formNewList="formDrawerList"
          :fromItem="fromItem"
          dialogImageUrl
          @determine="determine"
          @handleClose="handleClose"
          @changeSelect="changeSelect"
          labelWidth="120px"
          :disabled="isEditFlag"
        >
        </my-form>
      </div>
    </el-drawer>
  </div>
</template>

<script>
"use script";
import {
  whitListList,
  whitListAdd,
  whitListUpdate,
  whitListDelete
} from "@/api/whitList.js";
import { devPositionList } from "@/api/position.js";
export default {
  name: "whitListDialog",
  data() {
    return {
      formList: [
        {
          label: "sn",
          type: "input",
          model: "key"
        }
      ],
      tableData: [],
      coloumData: [
        {
          type: "text",
          label: "sn",
          prop: "sn"
        },
        {
          type: "text",
          label: "是否全天",
          prop: "allDay"
        },
        {
          type: "text",
          label: "所属单位",
          prop: "company"
        },
        {
          type: "text",
          label: "机型",
          prop: "model"
        },
        {
          type: "text",
          label: "备注",
          prop: "mark"
        },
        {
          slot: "operate",
          label: "操作",
          width: 250,
          fixed: "right"
        }
      ],
      paginationParam: {
        currentPage: 1,
        size: 10,
        total: 0
      },
      formItem: {},
      formDrawerList: [
        {
          label: "sn",
          type: "input",
          model: "sn",
          rules: [{ required: true, message: "请输入sn" }]
        },
        {
          label: "机型",
          type: "input",
          model: "model",
          rules: [{ required: true, message: "请输入机型" }]
        },
        {
          label: "是否全天",
          type: "select",
          model: "allDay",
          options: [
            { label: "是", key: "0" },
            { label: "否", key: "1" }
          ],
          rules: [
            { required: true, message: "请选择是否全天", trigger: "change" }
          ]
        },
        {
          label: "关联防区",
          type: "select",
          model: "positionId",
          options: [],
          disabled: false,
          multiple: true,
          rules: [
            { required: true, message: "请选择关联防区", trigger: "change" }
          ]
        },
        {
          label: "所属单位",
          type: "input",
          model: "company"
        },
        {
          label: "备注",
          type: "textarea",
          maxLenght: 100,
          rowsHeight: 15,
          placeholder: "请输入内容",
          model: "mark"
        },
        {
          label: "时间日期",
          type: "datetimerange",
          model: "date",
          format: "yyyy-MM-dd HH:mm:ss"
        }
      ],
      drawer: false,
      title: "",
      fromItem: {},
      isType: "",
      isEditFlag: false,
      PositionList: []
    };
  },
  components: {},
  mounted() {
    this.headdenForm({}, "search");
    this.search();
  },
  methods: {
    changeSelect(value) {
      const lastItem = this.formDrawerList[this.formDrawerList.length - 1];
      const dateTimeItem = {
        label: "时间日期",
        type: "datetimerange",
        model: "date",
        format: "yyyy-MM-dd HH:mm:ss"
      };

      if (value === "0") {
        if (lastItem.label === "时间日期") {
          this.formDrawerList.pop();
          // this.$set(this.fromItem, "date", null); // 清除 date 数据
        }
      } else if (value === "1") {
        if (lastItem.label !== "时间日期") {
          this.formDrawerList.push(dateTimeItem);
          // this.$set(this.fromItem, "date", []); // 初始化 date 数据
        }
      }
    },
    initPosition() {
      devPositionList().then((res) => {
        if (res.code === 0) {
          this.PositionList = res.data.items;
          this.formDrawerList.forEach((item) => {
            if (item.label === "关联防区") {
              item.options = res.data.items.map((item) => {
                item.label = item.name;
                item.key = item.id;
                return item;
              });
            }
          });
        }
      });
    },
    search() {
      this.headdenForm({}, "search");
    },
    // 搜索
    headdenForm(value, type) {
      let params = {};
      if (type === "search") {
        params = JSON.parse(JSON.stringify(this.$refs.myForm.ruleForm));
        if (params.dateRange) {
          params.startTime = params.dateRange[0];
          params.endTime = params.dateRange[1];
        }
        if (value.page !== undefined) {
          this.paginationParam.currentPage = value.page;
          this.paginationParam.size = value.pageSize;
        }
        params.pageNum = this.paginationParam.currentPage;
        params.pageSize = this.paginationParam.size;
        this.$delete(params, "dateRange");
        whitListList(params).then((res) => {
          if (res.code === 0) {
            this.tableData = res.data.items.map((item) => {
              return item.allDay
                ? { ...item, allDay: "是" }
                : { ...item, allDay: "否" };
            });
            this.paginationParam.total = res.data.total;
          }
        });
      } else if (type === "add") {
        this.isType = "add";
        this.title = "新增白名单";
        this.initPosition();
        this.fromItem = {};
        this.formDrawerList = this.getDefaultFormDrawerList();
        this.isEditFlag = false;
        this.drawer = true;
      }
    },
    // 确定按钮
    determine(value) {
      const params = { ...value };
      console.log(params, "params");

      // 设置 positionName
      // const position = this.PositionList.find(
      //   (item) => item.id === params.positionId
      // );
      // params.positionName = position ? position.name : "";

      // 处理 allDay 和时间
      if (params.allDay === "0") {
        params.allDay = true;
        params.startTime = "";
        params.endTime = "";
      } else {
        params.allDay = false;
        if (Array.isArray(params.date) && params.date.length === 2) {
          params.startTime = params.date[0];
          params.endTime = params.date[1];
        } else {
          params.startTime = "";
          params.endTime = "";
        }
      }
      delete params.date; // 移除 date 字段
      const apiCall = this.isType === "add" ? whitListAdd : whitListUpdate;
      apiCall(params)
        .then((res) => {
          if (res.code === 0) {
            this.$message.success(
              `${this.isType === "add" ? "新增" : "编辑"}成功`
            );
            this.search();
          } else {
            this.$message.error(
              `${this.isType === "add" ? "新增" : "编辑"}失败`
            );
          }
        })
        .catch((err) => {
          console.error(`${this.isType === "add" ? "新增" : "编辑"}错误:`, err);
          this.$message.error(
            `${this.isType === "add" ? "新增" : "编辑"}时发生错误`
          );
        });
      this.drawer = false;
    },
    // 编辑 删除
    handleClick(value, type) {
      if (type === "edit") {
        this.isType = "edit";
        this.title = "编辑白名单";
        this.isEditFlag = false;
        this.fromItem = { ...value };
        this.fromItem.positionId = value.positionIds;
        this.formDrawerList = this.getDefaultFormDrawerList();
        value.allDay = value.allDay ? "0" : "1";
        this.changeSelect(value.allDay); // 根据 allDay 调整时间日期字段
        this.initPosition();
        this.drawer = true;
      } else if (type === "delete") {
        console.log(value);
        let params = {
          id: value.id
        };
        this.$confirm("此操作将永久删除该白名单, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            whitListDelete(params).then((res) => {
              if (res.code === 0) {
                this.$message.success("删除成功");
                this.headdenForm({}, "search");
              }
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      }
    },
    // 关闭抽屉
    handleClose() {
      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");
    },
    handleSelectionChange(value) {
      console.log(value);
    }, // 初始化 formDrawerList 的公共方法
    getDefaultFormDrawerList() {
      return [
        {
          label: "sn",
          type: "input",
          model: "sn",
          rules: [{ required: true, message: "请输入sn" }]
        },
        {
          label: "机型",
          type: "input",
          model: "model",
          rules: [{ required: true, message: "请输入机型" }]
        },
        {
          label: "是否全天",
          type: "select",
          model: "allDay",
          options: [
            { label: "是", key: "0" },
            { label: "否", key: "1" }
          ],
          rules: [
            { required: true, message: "请选择是否全天", trigger: "change" }
          ]
        },
        {
          label: "关联防区",
          type: "select",
          model: "positionId",
          options: [],
          disabled: false,
          multiple: true,
          rules: [
            { required: true, message: "请选择关联防区", trigger: "change" }
          ]
        },
        {
          label: "所属单位",
          type: "input",
          model: "company"
        },
        {
          label: "备注",
          type: "textarea",
          maxLenght: 100,
          rowsHeight: 15,
          placeholder: "请输入内容",
          model: "mark"
        },
        {
          label: "时间日期",
          type: "datetimerange",
          model: "date",
          format: "yyyy-MM-dd HH:mm:ss"
        }
      ];
    }
  }
};
</script>
<style scoped lang="scss">
.dictionary {
  width: 95%;
  height: 100%;
  padding: 20px;
  position: relative;
}
</style>