jiangxiGaizao/src/views/duChaJiHua/dataApprove copy.vue

<template>
  <a-layout>
    <a-layout-content>
      <div class="page" style="display: flex;background-color: #fff;">
        <div class="leftTree">
          <ul>
            <!--               <li :class="{'active':isActive=='603'}" @click="showDetail('603')">测试</li>-->
            <li :class="{'active':isActive=='615'}" @click="showDetail('615')">大中型水闸工程督查填报</li>
            <li :class="{'active':isActive=='616'}" @click="showDetail('616')">堤防工程督查填报</li>
            <li :class="{'active':isActive=='617'}" @click="showDetail('617')">农村水电站督查填报</li>
            <li :class="{'active':isActive=='618'}" @click="showDetail('618')">取用水管理监督督查填报</li>
            <li :class="{'active':isActive=='619'}" @click="showDetail('619')">山洪灾害县水利局督查填报</li>
            <li :class="{'active':isActive=='620'}" @click="showDetail('620')">山洪灾害预警广播站督查填报</li>
            <li :class="{'active':isActive=='621'}" @click="showDetail('621')">水资源重点工作督查填报</li>
            <li :class="{'active':isActive=='622'}" @click="showDetail('622')">万人以上农饮工程督查填报</li>
            <li :class="{'active':isActive=='623'}" @click="showDetail('623')">万人以下工程农饮工程督查填报</li>
            <li :class="{'active':isActive=='624'}" @click="showDetail('624')">小型水闸工程督查填报</li>
            <li :class="{'active':isActive=='625'}" @click="showDetail('625')">饮用水水源地督查填报</li>
            <li :class="{'active':isActive=='626'}" @click="showDetail('626')">用水统计督查填报</li>
            <li :class="{'active':isActive=='627'}" @click="showDetail('627')">自动监测站点督查填报</li>
            <li :class="{'active':isActive=='628'}" @click="showDetail('628')">小型水库督查填报</li>
            <li :class="{'active':isActive=='629'}" @click="showDetail('629')">大中型水库督查填报</li>
          </ul>
        </div>
        <div class="rightContent">
          <a-form layout="inline" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }" class="demo-form-inline">
            <a-form-item label="原督查对象名称" style="width: 24%;">
              <a-input v-model:value="searchObj.nm" allow-clear placeholder="原督查对象名称" />
            </a-form-item>
            <!-- <a-form-item label="行政区名称" style="width: 24%;">
              <addvSearch
                v-model="searchObj.adFullName"
                :maxHeight="300"
                :maxWidth="250"
                :rootAddCode="curAdcode_long"
                :level="&quot;3&quot;"
                :nameOrCode="'name'"></addvSearch>
            </a-form-item> -->
            <a-form-item label="调整方式" style="width: 24%;">
              <a-select v-model:value="searchObj.adjustWay" placeholder="调整方式" allow-clear style="margin-left:10px;margin-right:15px">
                <a-select-option value="1">数据调整</a-select-option>
                <a-select-option value="2">逻辑删除</a-select-option>
              </a-select>
            </a-form-item>
            <a-form-item>
              <a-button type="primary" icon="appstore" @click="agreeShow" :disabled="!multipleSelection || multipleSelection.length==0">批量审核</a-button>
            </a-form-item>
            <a-form-item>
              <a-button type="primary"  ghost @click="searchPlan">查询</a-button>
            </a-form-item>
          </a-form>
          <a-table
            :data-source="tableData"
            :columns="columns"
            :pagination="false"
            row-key="id"
            style="width: 100%;"
            :style="{ height: tableHeight + 'px' }"
            :row-selection="rowSelection"
            :scroll="{y:tableHeight-60}"
            bordered>
            <template slot="index" slot-scope="text, recode, index">
              <span>{{ (pageIndex - 1) * pageSize + (index + 1) }}</span>
            </template>
            <template slot="adjustWay" slot-scope="text">
              <span v-if="text.adjustWay == '1'">数据调整</span>
              <span v-if="text.adjustWay == '2'">逻辑删除</span>
            </template>
            <template slot="auditStatus" slot-scope="text">
              <span :style="{color:text.buttonCss}">{{ text.auditStatus }}</span>
            </template>
            <template slot="action" slot-scope="text">
              <a-button type="primary" size="small" @click="showFileList(text)">相关文件</a-button>
              <a-button type="primary" size="small" @click="showApprove(text)">查看</a-button>
              <a-button type="primary" size="small" @click="showRecord(text)">记录</a-button>
            </template>
          </a-table>
          <a-pagination
            show-size-changer
            :pageSize="pageSize" @update:pageSize="pageSize = $event"
            :total="total"
            :page-size-options="['10', '20', '30', '40']"
            :show-total="total => `共${total}条`"
            @showSizeChange="handleSizeChange"
            @change="handleCurrentChange"
            style="margin-top: 10px;" />
        </div>
      </div>
      <a-modal :title="editTitle+'信息调整申请'" :open="isEditShow" width="30%" @cancel="isEditShow=false">
        <a-form :model="editForm" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }" ref="editForm" class="demo-ruleForm">
          <a-form-item label="调整方式">
            {{ editForm.adjustWay=='1'?'数据调整':'逻辑删除' }}
          </a-form-item>
          <a-form-item label="对象名称">
            {{ editForm.nm }}
          </a-form-item>
          <a-form-item label="原所属区划" v-show="editForm.adjustWay=='1'">
            {{ editForm.adName }}
          </a-form-item>
          <a-form-item label="调整后区划" v-show="editForm.adjustWay=='1'">
            {{ editForm.newAdName }}
          </a-form-item>
          <a-form-item label="所属区划" v-show="editForm.adjustWay=='2'">
            {{ editForm.adName }}
          </a-form-item>
          <a-form-item :label="editForm.adjustWay=='1'?'调整说明':'删除原因'">
            {{ editForm.adjustRecord }}
          </a-form-item>
        </a-form>
        <span slot="footer" class="dialog-footer" style="display: flex;justify-content: center;" v-if="editForm.button">
          <a-button type="primary" @click="agree(1)" :disabled="isLoadingBtn">同 意</a-button>
          <a-button type="danger" @click="agree(2)" :disabled="isLoadingBtn">驳 回</a-button>
        </span>
      </a-modal>
      <adjustment :bizId="bizId" :bizType="bizType" v-if="isAdjust" @jqmmDialogClose="jqmmDialogClose"></adjustment>
      <a-modal :title="recordTitle+'数据调整记录'" :open="isRecord" width="40%" @cancel="isRecord=false">
        <span style="display: block;max-height:500px;overflow:auto;padding: 20px">
          <a-timeline v-if="activities && activities.length>0">
            <a-timeline-item v-for="(activity, index) in activities" :key="index" color="#3fa4ff">
              <p style="font-size: 18px;font-weight: bold;">{{ activity.timestamp }}</p>
              <p style="font-size: 18px;">{{ activity.title }}</p>
              <p style="font-size: 15px;">{{ activity.detail }}</p>
            </a-timeline-item>
          </a-timeline>
          <div
            style="width:100%;height:100%;display: flex;align-items: center;justify-content: center;font-size: 20px;font-weight: bold"
            v-else>无记录</div>
        </span>
      </a-modal>
      <a-modal
        :title="'批量审核'"
        :open="isApprove"
        width="300px"
        @cancel="isApprove=false"
        :footer="null">
        <span style="display:block;text-align: center;">
          <a-button type="primary" @click="batchAgree(1)" :disabled="isLoadingBtn">同意</a-button>
          <a-button type="warning" @click="batchAgree(2)" :disabled="isLoadingBtn">驳回</a-button>
        </span>
      </a-modal>
    </a-layout-content>
  </a-layout>
</template>

<script>
import { curAdcode_long } from '../../utils/global_variable';
import request from '../../utils/gw_ajax_request.js';
import { dateFormat } from '../../utils/gw_date.js';
import addvSearch from '../../widgets/addvSearch.vue';
import adjustment from './adjustment';
export default {
  components: {
    addvSearch,
    adjustment,
  },
  data() {
    return {
      tableHeight: window.innerHeight - 250,
      loading: false,
      pageIndex: 1,
      total: 0,
      pageSize: 10,
      addDialogVisible: false,
      formLabelWidth: 80,
      addObj: {},
      searchObj: {
        nm: '',
        adFullName: '',
        adjustWay: '',
      },
      userRole: '',
      dialogTitle: '添加',
      tableData: [],
      isActive: '615',
      editTitle: '',
      editForm: {},
      isEditShow: false,
      isLoadingBtn: false,
      bizId: '',
      bizType: '',
      isAdjust: false,
      isEditRecordShow: false,
      isRecord: false,
      activities: [],
      recordTitle: '',
      multipleSelection: [],
      isApprove: false,
      selectedRowKeys: [],
      columns: [
        {
          title: '序号',
          dataIndex: 'index',
          width: 80,
          align: 'center',
          ellipsis: true,
        },
        {
          title: '督查对象名称',
          dataIndex: 'nm',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '原所属区划',
          dataIndex: 'adName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '调整后区划',
          dataIndex: 'newAdName',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '调整方式',
          dataIndex: 'adjustWay',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '状态',
          dataIndex: 'auditStatus',
          align: 'center',
          ellipsis: true,
        },
        {
          title: '操作',
          dataIndex: 'action',
          align: 'center',
          ellipsis: true,
        },
      ],
    };
  },
  computed: {
    userId: () =>
      localStorage.getItem('persId')
        ? localStorage.getItem('persId')
        : '1098101939614724096',
    curAdcode_long() {
      return curAdcode_long;
    },
    rowSelection() {
      return {
        selectedRowKeys: this.selectedRowKeys,
        onChange: this.handleSelectionChange,
        getCheckboxProps: (record) => ({
          props: {
            disabled: record.button === false,
          },
        }),
      };
    },
  },
  created() {},
  mounted() {
    this.searchPlan();
  },
  methods: {
    agreeShow() {
      this.isApprove = true;
    },
    selected(row, index) {
      if (row.button) {
        return true;
      } else {
        return false;
      }
    },
    handleSelectionChange(val, row) {
      this.selectedRowKeys = val;
      this.multipleSelection = row;
    },
    showRecord(row) {
      this.recordTitle = row.nm;
      this.isRecord = true;
      this.activities = [];
      var params = {
        objId: row.objId,
      };
      request
        .post('/bis/insp/gnrlRgstrAdjust/findDtoList', params)
        .then((res) => {
          if (res.success) {
            if (res.data && res.data.length > 0) {
              var data = res.data;
              var dataList = [];
              data.forEach((item) => {
                var updateContent = item.detail;
                item.auditList.forEach((item1) => {
                  var date = new Date(item1.intm);
                  var timestamp =
                    date.getFullYear() +
                    '年' +
                    (date.getMonth() + 1) +
                    '月' +
                    date.getDate() +
                    '日';
                  dataList.push({
                    title: item1.roleName + '-' + item1.auditPersName,
                    timestamp: timestamp,
                    detail: item1.opStatus + ',' + updateContent,
                  });
                });
              });
              this.activities = dataList;
            }
          } else {
            this.$message.error(res.message);
          }
        })
        .catch((res) => {
          this.$message.error('请求错误' + res.message);
        });
    },
    jqmmDialogClose() {
      this.isAdjust = false;
    },
    showFileList(row) {
      this.bizId = row.id;
      this.bizType = 'adjustment';
      this.isAdjust = true;
    },
    batchAgree(type) {
      this.isLoadingBtn = true;
      var list = [];
      this.multipleSelection.forEach((item) => {
        list.push({
          id: item.id,
          auditWay: type,
        });
      });
      this.$confirm({
        title: '提示',
        content: `确认要批量${type == '1' ? '同意' : '驳回'}, 是否继续?`,
        okType: 'warning',
        onOk: () => {
          request
            .post(
              '/bis/insp/gnrlRgstrAdjust/batchAgreeToDismissFlowStatus',
              list,
            )
            .then((res) => {
              if (res.success) {
                this.isLoadingBtn = false;
                this.isApprove = false;
                this.searchPlan();
              }
            });
        },
        onCancel: () => {
          this.isLoadingBtn = false;
          this.$message.info('已取消删除');
        },
      });
    },
    agree(type) {
      this.isLoadingBtn = true;
      var obj = {
        id: this.editForm.id,
        auditWay: type,
      };
      request
        .post('/bis/insp/gnrlRgstrAdjust/agreeToDismissFlowStatus', obj)
        .then((res) => {
          if (res.success) {
            this.isLoadingBtn = false;
            this.isEditShow = false;
            this.searchPlan();
          }
        });
    },
    showApprove(row) {
      this.isLoadingBtn = false;
      this.editForm = row;
      this.editTitle = row.nm;
      this.isEditShow = true;
    },
    showDetail(type) {
      this.isActive = type;
      this.searchPlan();
    },
    formatDate(row, column) {
      if (row[column.property]) {
        return dateFormat(row[column.property], 'yyyy-MM-dd');
      }
    },
    searchPlan() {
      this.loading = true;
      this.searchObj.type = this.isActive;
      this.searchObj.pageNum = this.pageIndex;
      this.searchObj.pageSize = this.pageSize;
      // this.searchObj.userRole = this.$route.params.id
      this.searchObj.userRole = this.$route.path.substring(
        this.$route.path.length - 1,
      );
      request
        .post('/bis/insp/gnrlRgstrAdjust/findList', this.searchObj)
        .then((res) => {
          if (res.success) {
            this.tableData = res.data.list;
            this.total = res.data.total;
            this.loading = false;
            this.multipleSelection = [];
            this.$nextTick(() => {
              // _self.$refs.myTable.doLayout()
              // _self.$refs.myTable.clearSelection()
              this.selectedRowKeys = [];
            });
          }
        });
    },
    addPlanDialog() {
      this.addDialogVisible = true;
      this.addObj = {};
      this.dialogTitle = '添加';
    },
    handleSizeChange(size, val) {
      this.pageSize = val;
      this.searchPlan();
    },
    handleCurrentChange(val) {
      this.pageIndex = val;
      this.searchPlan();
    },
  },
  watch: {
    $route(to, from) {
      this.searchPlan();
    },
  },
};
</script>

<style lang='less' scoped>
.active {
   background: #00b0f0;
   color: white;
 }

 .el-container {
   width: 100%;
   height: 100%;
 }

 .leftTree {
   overflow: auto;
 }

 .leftTree ul {
   width: 100%;
   padding: 0px;
   margin: 0;
 }

 .leftTree ul li {
   width: 100%;
   height: 40px;
   line-height: 40px;
   text-align: left;
   text-indent: 10px;
   border-bottom: 1px solid #eeeeee;
   font-size: 14px;
   cursor: pointer;
   text-align: center;
 }

 .demo-form-inline {
   padding-top: 10px;
   padding-left: 10px;
   padding-right: 10px;
 }

 .page {
   width: 100%;
   height: 100%;
   margin: 0;
   padding: 0;
 }

 .leftTree {
   width: 300px;
   height: calc(100% - 20px);
   margin-top: 10px;
   margin-left: 10px;
   box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
 }

 .rightContent {
   width: calc(100% - 330px);
   height: calc(100% - 20px);
   margin-top: 10px;
   margin-left: 10px;
   box-shadow: 0 1px 6px 0 rgb(32 33 36 / 28%);
 }

 .rightContent /deep/ .el-tabs--border-card {
   width: 100%;
   height: 100%;
   border: 0;
 }

 .rightContent /deep/ .ant-table-content {
   height: calc(100% - 70px);
 }

 .rightContent /deep/ .el-tab-pane {
   height: 100%;
 }

 .tabs_detail1 .ant-table {
   height: 100% !important;
 }

 .tabs_detail1 /deep/ .el-table__body-wrapper {
   height: calc(100% - 40px);
   overflow: auto;
 }

 .tabs_detail2 .el-table {
   height: calc(100% - 80px) !important;
 }

 .tabs_detail2 /deep/.el-table__body-wrapper {
   height: calc(100% - 40px);
   overflow: auto;
 }
</style>