jiangxiGaizao/src/views/duChaGuanLi/duChaQuYuList.vue

<template>
  <div
    style="height:100%;max-height:100%;overflow-y:auto;display:flex;flex-direction:column;justify-content:space-between;"
  >
    <div
      class="box-card"
      style="background-color: #ECF8FF; height: 40px; font-size: small; line-height: 30px; display: flex; justify-content: space-between; align-items: center;"
    >
      <div style="display:flex;" class="checkbox_left">
        <a-checkbox :checked="checked" @change="onChecked">本级</a-checkbox>
        <a-input-search
          v-model="input5"
          placeholder="请输入区域名称"
          enter-button
          @search="searchDcryResult"
          allow-clear
          style="width: 200px; margin-left: 30px;"
        />
      </div>
      <a-button
        v-if="dczId.length == 12"
        @click="editHandler"
        type="primary"
        icon="edit"
        size="small"
        ghost
        style="float: right; margin-right: 10px; height: 30px;"
      >添加区域</a-button
      >
    </div>
    <a-table
      :columns="columns"
      :data-source="tableData"
      @change="handleCurrentChange"
      :loading="loading"
      rowKey="index"
      :pagination="{
        total,
        defaultPageSize: pageSize,
        showTotal: (total) => `共${total}条`,
      }"
      style="width: 100%;"
      :style="{ height: tableHeight + 'px' }"
    >
      <template #bodyCell="{ column, record }">
        <template v-if="column.dataIndex === 'action' && ownPriv('manage')">
          <a @click="showConfirmDialog(record)">删除</a>
        </template>
      </template>
    </a-table>
    <a-modal
      v-model:open="confirmDialogVisible"
      title="提示"
      @ok="deleteHandler"
      @cancel="confirmDialogVisible = false"
    >
      <div>
        <span>是否删除该区域下的所有督查对象</span>
        <a-radio-group v-model:value="isDeleteObj">
          <a-radio :value="1">是</a-radio>
          <a-radio :value="2">否</a-radio>
        </a-radio-group>
      </div>
    </a-modal>
  </div>
</template>

<script>
import { Modal } from 'ant-design-vue';
import {
  deleteDcqy,
  getDcqyList,
  getDcqyListAll,
} from '../../api/duChaPlan.js';
export default {
  props: ['objType', 'dczId', 'dczName'],
  computed: {
    userInAllNode: () => {
      // 当前登录用户所在的所有组信息
      return JSON.parse(localStorage.getItem('allNode'))
        ? JSON.parse(localStorage.getItem('allNode'))
        : [];
    },
    isAdmin: () =>
      localStorage.getItem('isAdmin') ? localStorage.getItem('isAdmin') : '',
  },
  data() {
    return {
      input5: '',
      checked: false,
      loading: true,
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      showResultCount: 0,
      showEdit: true,
      tableData: [],
      currentShowList: [],
      tableHeight: window.innerHeight - 280,
      isAll: '0',
      confirmDialogVisible: false, // 确定删除区域弹窗是否显示
      isDeleteObj: 2, // 是否删除区域下的所有督查对象  1 是  2 否
      itemInfo: null, // 当前选中区域的额信息
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '70px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '70px',
              },
            };
          },
        },
        {
          title: '名称',
          dataIndex: 'adName',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '编码',
          dataIndex: 'adCode',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '100px',
              },
            };
          },
        },
        {
          title: '所在分组',
          dataIndex: 'pnm',
          align: 'center',
          ellipsis: true,
          customCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '80px',
              },
            };
          },
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          fixed: 'right',
          customCell: () => {
            return {
              style: {
                'min-width': '140px',
              },
            };
          },
          customHeaderCell: () => {
            return {
              style: {
                'min-width': '140px',
              },
            };
          },
        },
      ],
    };
  },
  mounted() {
    this.getDcqyResult(); // 获取督查人员列表
  },
  methods: {
    getDcqyResult() {
      if (!this.dczId) {
        this.loading = false;
        return;
      }
      this.loading = true;
      if (this.isAll == '1') {
        getDcqyList(
          this.dczId,
          this.pageSize,
          this.pageIndex,
          this.input5,
        ).then((response) => {
          this.tableData = response.data.list;
          this.total = response.data.total;
          this.loading = false;
          this.tableData.forEach((element, index) => {
            element['index'] = this.pageSize * (this.pageIndex - 1) + index + 1;
          });
        });
      } else {
        getDcqyListAll(
          this.dczId,
          this.pageSize,
          this.pageIndex,
          this.input5,
        ).then((response) => {
          this.tableData = response.data.list;
          this.total = response.data.total;
          this.loading = false;
          this.tableData.forEach((element, index) => {
            element['index'] = this.pageSize * (this.pageIndex - 1) + index + 1;
          });
        });
      }
    },
    onChecked(e) {
      this.checked = e.target.checked;
    },
    searchDcryResult(val) {
      this.input5 = val;
      this.pageIndex = 1;
      this.getDcqyResult();
    },
    editHandler(item) {
      this.$emit('showEditDialog', item);
    },
    handleCurrentChange(item) {
      this.pageIndex = item.current;
      this.getDcqyResult();
    },
    showConfirmDialog(row) {
      this.confirmDialogVisible = true;
      this.itemInfo = row;
    },
    deleteHandler() {
      Modal.confirm({
        title: '提示',
        content: '是否确认删除?',
        okType: 'warning',
        onOk: () => {
          deleteDcqy(this.itemInfo.areaId, this.isDeleteObj).then(
            (response) => {
              this.getDcqyResult();
              this.$message.success('删除成功');
              this.confirmDialogVisible = false;
            },
          );
          return Promise.resolve();
        },
        onCancel: () => {
          this.$message.info('已取消删除');
        },
      });
    },
  },
  watch: {
    dczId: {
      immediate: true,
      handler(n, o) {
        console.log('[duChaQuYuList] dczId变化:', n);
        this.getDcqyResult(n);
      },
    },
    checked(n, o) {
      if (n == true) {
        this.isAll = '1';
      } else {
        this.isAll = '0';
      }
      this.pageIndex = 1;
      this.getDcqyResult();
    },
  },
};
</script>

<style lang="less" scoped>
.checkbox_left {
  margin-left: 20px;
}
:deep(.ant-checkbox-wrapper ) {
  white-space: nowrap;
}
:deep(.ant-table-pagination ) {
  float: left;
}
/deep/ .ant-table-thead > tr > th,
/deep/ .ant-table-tbody > tr > td {
  padding: 0;
  height: 50px;
}
</style>