ioc-admin-ui/src/views/systemManagement/infoConfiguration/securitystaffInfo.vue

<template>
  <div>

    <div class="header_container">
      <el-breadcrumb
        class="info"
        separator-class="el-icon-arrow-right"
      >
        <el-breadcrumb-item>{{itemInfo.parentData.label}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{itemInfo.data.label}}</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="func_container">
      <el-button
        class="create"
        @click="createNewPeople"
      >新建</el-button>
      <el-button
        class="history"
        type="text"
        @click="openHistory"
      >历史记录</el-button>
    </div>
    <div class="people_table">
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        height="650"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="50"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="姓名"
        >
        </el-table-column>
        <el-table-column
          prop="work_number"
          label="工号"
        >
        </el-table-column>
        <el-table-column
          prop="phone"
          label="联系方式"
        >
        </el-table-column>
        <el-table-column
          prop="responsibility_range"
          label="职责范围"
        >
        </el-table-column>
        <el-table-column label="照片">
          <template slot-scope="scope">
            <el-image
              :src="scope.row.photo"
              style="width: 40px; height: 40px;"
              :preview-src-list="[scope.row.photo]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="状态">
          <template slot-scope="scope">
            <span v-if="scope.row.status == 1">正常</span>
            <span v-if="scope.row.status == 2">离职</span>
            <span v-if="scope.row.status == 3">暂时冻结</span>
          </template>
          x
        </el-table-column>
        <el-table-column
          label="值班日期"
          width="400"
        >
          <template slot-scope="scope">
            <!-- <el-button
              @click="handleClick(scope.row)"
              type="text"
              size="small"
            >查看</el-button>
            <el-button
              type="text"
              size="small"
            >编辑</el-button> -->
            <span v-if="scope.row.duty_time">
              {{$dayjs(scope.row.duty_time.start_time).format("YYYY-MM-DD HH:mm:ss").replace("-","年").replace("-","月").replace(" ","日 ")}} 至 {{$dayjs(scope.row.duty_time.end_time).format("YYYY-MM-DD HH:mm:ss").replace("-","年").replace("-","月").replace(" ","日 ")}}
            </span>

          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          label="操作"
          width="160"
        >
          <template slot-scope="scope">
            <el-button
              type="text"
              size="small"
              @click="updatePeo(scope.row)"
            >
              编辑
            </el-button>
            <el-button
              type="text"
              size="small"
              @click="deletePeo(scope.row)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="footer">
      <page :paginationData="paginationData"></page>
    </div>
    <createPeople
      ref="createPeople"
      v-bind="{
        
      }"
    ></createPeople>
    <createUpdatePeople
      ref="createUpdatePeople"
      v-bind="{
        editData:editData,
        update:getListAfterUpdate
      }"
    ></createUpdatePeople>
    <historyPeople
      ref="historyPeople"
      v-bind="{
        itemInfo:itemInfo
      }"
    ></historyPeople>
  </div>
</template>

<script>
import page from "@/components/pagination/index";

import createPeople from "./dialog/createPeople.vue";
import createUpdatePeople from "./dialog/createUpdatePeople.vue";
import historyPeople from "./dialog/historyPeople.vue";

import api from "@/api/infoConfig/api";
export default {
  props: {
    itemInfo: {
      type: Object,
    },
  },
  components: {
    page,
    createPeople,
    createUpdatePeople,
    historyPeople,
  },
  data() {
    return {
      // 正常 已离职 暂时冻结
      currentPageSize: 10,
      currentPage: 1,
      paginationData: {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 0,
        currentChange: (val) => {
          that.handlePageChange(val);
        },
        handleSizeChange: (val) => {
          that.handleSizeChange(val);
        },
      },
      tableData: [],
      editData: null,
    };
  },
  mounted() {
    this.resetPageConfig({
      currentPage: 1,
    });
    this.handlePageChange(1);
  },
  methods: {
    createNewPeople() {
      this.$refs.createPeople.dialogVisible = true;
    },
    updatePeo(data) {
      this.editData = data;
      this.$refs.createUpdatePeople.dialogVisible = true;
    },
    deletePeo(data) {
      this.$confirm("此操作将删除该条信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          const loading = this.$loading({
            lock: true,
            text: "删除中，请稍后！",
            spinner: "el-icon-loading",
            background: "rgba(0, 0, 0, 0.7)",
            customClass: "systemConfigLoading",
          });
          api
            .delPerson({
              id: this.itemInfo.data.id,
              staff:  data.id,
            })
            .then((result) => {
              loading.close();
              if (result.data.code == 0) {
                this.resetPageConfig({
                  currentPage: 1,
                });
                this.handlePageChange(1);
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              } else {
                this.$message({
                  type: "error",
                  message: "删除失败!",
                });
              }
            })
            .catch((err) => {
              loading.close();
              this.$message({
                type: "error",
                message: "删除失败!",
              });
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    handlePageChange(val) {
      this.paginationData.currentPage = val;
      this.getListData({
        id: String(this.itemInfo.data.id),
        page_size: this.paginationData.pageSize,
        page: val,
      })
        .then((result) => {})
        .catch((err) => {});
    },
    handleSizeChange(val) {
      this.paginationData.pageSize = val;
      this.getListData({
        id: String(this.itemInfo.data.id),
        page_size: val,
        page: this.paginationData.currentPage,
      })
        .then((result) => {})
        .catch((err) => {});
    },
    resetPageConfig(obj) {
      let t = {
        pageSize: 10,
        pagerCount: 5,
        currentPage: 1,
        pageSizes: [5, 10, 20, 30],
        total: 0,
        currentChange: (val) => {
          this.handlePageChange(val);
        },
        handleSizeChange: (val) => {
          this.handleSizeChange(val);
        },
      };
      if (obj != null || obj != undefined) {
        for (const key in obj) {
          t[key] = obj[key];
        }
        this.paginationData = t;
      }
    },
    getListData(obj) {
      let that = this;
      return new Promise((resolve, reject) => {
        api
          .getSecurityInfoConfiguration(obj)
          .then((result) => {
            if (result.data.code == 0) {
              // "company": null,
              // "company_id": null,
              // "department": null,
              // "dept_id": null,
              // "duty_time": "{'start_time': '2023-1-10 20:00:00', end_time: '2023-1-20 20:00:00'}",
              // "id": 2,
              // "name": "\u5f20\u707f",
              // "phone": "010-68799999-6688",
              // "photo": "/images/0399.png",
              // "register_time": "2023-03-08 13:45:34",
              // "responsibility_range": "\u5b89\u9632\u4eba\u5458",
              // "scope": null,
              // "status": "1",
              // "type": 1,
              // "work_number": "0399"
              let tableData = result.data.data.staff_list;
              this.tableData = tableData.map((item) => {
                // item.photo = "/api" + item.photo;
                item.photo =
                  "https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png";
                return item;
              });
              that.paginationData.total = tableData.length;
              resolve();
            } else {
              reject();
            }
          })
          .catch((err) => {
            reject();
          });
      });
    },
    getListAfterUpdate() {
      this.resetPageConfig({
        currentPage: 1,
      });
      this.handlePageChange(1);
    },
    openHistory() {
      this.$refs.historyPeople.dialogVisible = true;
    },
  },
  watch: {
    itemInfo() {
      this.resetPageConfig({
        currentPage: 1,
      });
      this.handlePageChange(1);
    },
  },
};
</script>

<style lang="less" scoped>
.header_container {
  position: relative;
  width: 100%;
  height: 60px;
  margin-top: 10px;
  .el-breadcrumb {
    line-height: 60px;
    font-size: 20px;
  }
  .el-button {
    height: 30px;
    width: 100px;
    padding: 5px;
  }
}
.func_container {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  .create {
    float: left;
  }
  .history {
    float: right;
  }
}
.people_table {
  height: 650px;
  width: 100%;
  margin-top: 10px;
}
</style>