Merge branch 'feature_1.0'

quanyawei

2023-10-07 9083fd270cd172f998eb2dd3dfae59187a70cb1a

 src/views/toCarryOutLegislativeReforms/reform/index.vue

New file
@@ -0,0 +1,502 @@
<template>
  <div class="main">
    <div>
      <searchBar v-if="searchType" :search-type="'reform'" @handleSearch="handleSearch" @handleAdd="handleOpenDialog(null,'add')" />
      <newWorkOrder
        v-if="centerDialogVisible"
        ref="newWorkOrder"
        :parent-form-data="parentFormData"
        :title="title"
        :page-state="pageState"
        :visible.sync="centerDialogVisible"
        @handleSubmit="newHandleSubmit"
      />
      <div class="tab">
        <el-table
          size="mini"
          :data="tableData"
          border
          max-height="680"
          style="width: 100%"
          :header-cell-style="{
            color: '#101111', fontSize: '16px'
          }"
        >
          <el-table-column
            type="index"
            label="序号"
            width="60px"
            align="center"
          />
          <el-table-column
            align="center"
          >
            <template slot="header">
              <div>单号</div>
              <div>上报时间</div>
            </template>
            <template slot-scope="scope">
              <div> {{ scope.row.allocationNum }}</div>
              <div> {{ scope.row.escalationTime }}</div>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="unitId"
            label="责任主体"
            :formatter="unitIdFormatter"
          />
          <el-table-column
            align="center"
            prop="polluteType"
            label="污染分类"
            width="120px"
            :formatter="polluteTypeFormatter"
          />
          <el-table-column
            align="center"
          >
            <template slot="header">
              <div>整改方式</div>
              <div>剩余天数</div>
            </template>
            <template slot-scope="scope">
              <div>  {{ dictObj.changeEnum[scope.row.changeType] }}</div>
              <div v-show="scope.row.changeType && scope.row.changeType===2" :class="[Number(scope.row.residueDay) < 0 ? errorClass : '']">
                <span v-if="Number(scope.row.residueDay) < 0">
                  延期 {{ Math.abs(scope.row.residueDay) }}天
                </span>
                <span v-else>
                  {{ scope.row.residueDay }}天
                </span>

              </div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="investigationType"
            label="排查方式"
            width="100px"
            :formatter="investigationTypeFormatter"
          />
          <el-table-column
            align="center"
            prop="state"
            width="100px"
            label="流程状态"
          >
            <template slot-scope="scope">
              <el-tag v-if="scope.row.state===40" type="success">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===50" type="danger">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===9" type="info">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===20" type="warning">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===10" type="warning">
                {{ stateFormatter(scope.row) }}
              </el-tag>
              <el-tag v-if="scope.row.state===30" type="warning">
                {{ stateFormatter(scope.row) }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="isInvalid"
            label="是否作废"
            width="60px"
            :formatter="isInvalidFormatter"
          />
          <el-table-column
            align="center"
          >
            <template slot="header">
              <div>上报单位</div>
              <div>上报人</div>
            </template>
            <template slot-scope="scope">
              <div> {{ scope.row.escalationName }}</div>
              <div> {{ updatUnitIdFormatter(scope.row) }}</div>

            </template>
          </el-table-column>
          <el-table-column
            align="center"
          >
            <template slot="header">
              <div>操作人</div>
              <div>操作时间</div>
            </template>
            <template slot-scope="scope">
              <div>{{ scope.row.updateName }}</div>
              <div>{{ scope.row.updateTime }}</div>
            </template>
          </el-table-column>
          <el-table-column
            align="center"
            prop="createTime"
            width="100px"
            label="操作"
          >
            <template slot-scope="scope">
              <el-button type="text" size="medium" @click="openWorkOrdinDialog(scope.row,'detail')">详情</el-button>
              <el-button v-if="scope.row.state===9" type="text" size="medium" @click="handleOpenDialog(scope.row,'edit')">编辑</el-button>
              <el-button v-if="scope.row.state>30&&scope.row.isInvalid===0" type="text" size="medium" @click="handleCancel(scope.row)">作废</el-button>
              <el-button v-if="scope.row.state===20" type="text" size="medium" @click="openWorkOrdinDialog(scope.row,'work')">整改</el-button>
              <el-button v-if="scope.row.state===30&&scope.row.isApprove===1" type="text" size="medium" @click="openWorkOrdinDialog(scope.row,'approve')">审批</el-button>
              <el-button v-if="scope.row.state===20&&scope.row.changeType===2&&scope.row.applyState===0" type="text" size="medium" @click="openWorkOrdinDialog(scope.row,'delay')">延期申请</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pagina">
        <el-pagination
          background
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizes"
          :page-size="pagination.pageSize"
          :total="pagination.totalCount"
          layout="total, sizes, prev, pager, next, jumper"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <workOrderInformation v-if="workOrdinDialogVisible" :dialog-data="dialogData" :visible.sync="workOrdinDialogVisible" @handeleSumit="handeleSumit" />
    <el-dialog
      title="作废"
      :visible.sync="dialogVisible"
      width="600px"
      :before-close="handleClose"
      center
    >
      <div>
        <el-form label-width="100px">
          <el-form-item label="作废理由：" style="margin-right: 30px;">
            <el-input
              v-model="invalidReason"
              type="textarea"
              :autosize="{ minRows: 2, maxRows: 10}"
              placeholder="请输入内容"
            />
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="handleInvalid">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import searchBar from '@/views/toCarryOutLegislativeReforms/components/queryForm'
import newWorkOrder from '@/views/toCarryOutLegislativeReforms/components/newWorkOrder'
import workOrderInformation from '@/views/toCarryOutLegislativeReforms/components/workOrderInformation'
export default {
  components: {
    searchBar,
    newWorkOrder,
    workOrderInformation
  },
  data() {
    return {
      errorClass: 'errorClass',
      searchType: 'reform',
      pagination: {
        currentPage: 1,
        // 总条数，根据接口获取数据长度(注意：这里不能为空)
        totalCount: 0,
        // 个数选择器（可修改）
        pageSizes: [10, 20, 30, 40],
        // 默认每页显示的条数（可修改）
        pageSize: 10
      },
      formData: {},
      tableData: [
      ],
      dialogData: {
        title: '整改',
        parentFormData: {},
        pageState: 'work'
      },
      pageStats: 'add',
      workOrdinDialogVisible: false,
      centerDialogVisible: false,
      dialogVisible: false,
      unitList: [],
      polluteList: [],
      Dic: JSON.parse(localStorage.getItem('dict')),
      dictObj: JSON.parse(localStorage.getItem('dictObj')),
      parentFormData: {},
      pageState: 'add',
      invalidReason: '',
      slectRow: {},
      title: '',
      searchData: {
        isInvalid: 0
      }
    }
  },

  created() {
    this.handleSearch()
    this.getUnitList()
    this.getContaminateList()
  },
  methods: {
    handleCancel(row) {
      this.dialogVisible = true
      this.slectRow = row
    },
    handleClose() {
      this.dialogVisible = false
    },
    handleInvalid() {
      this.$request({
        url: '/allocation/invalid',
        method: 'get',
        params: {
          id: this.slectRow.allocationId,
          invalidReason: this.invalidReason
        }
      }).then((res) => {
        if (res.code === 0) {
          this.$message({
            message: '处理成功',
            type: 'success'
          })
          this.dialogVisible = false
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 详情
    handleOpenDialog(row, type) {
      this.pageState = type
      this.parentFormData = {}
      if (type === 'add') {
        this.title = '新建交办单'
        this.centerDialogVisible = true
      } else {
        this.title = '编辑交办单'
        this.$request({
          url: '/allocation/detail',
          method: 'get',
          params: {
            id: row.allocationId
          }
        }).then((res) => {
          this.parentFormData = res.data
          console.log(this.parentFormData)
          this.centerDialogVisible = true
        })
      }
    },
    updatUnitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.escalationUnitId)
      return data ? data.unitName : ''
    },
    unitIdFormatter(val) {
      const data = this.unitList.find(item => item && item.unitId === val.unitId)
      return data ? data.unitName : ''
    },
    polluteTypeFormatter(val) {
      const data = this.polluteList.find(item => item && parseInt(item.dataKey) === val.polluteType)
      return data ? data.dataValue : ''
    },
    investigationTypeFormatter(val) {
      return this.dictObj.investigationEnum[val.investigationType]
    },
    stateFormatter(val) {
      console.log('valval', val)
      return this.dictObj.allocationApproveEnum[val.state]
    },
    isInvalidFormatter(val) {
      return this.dictObj.yesOrNo[val.isInvalid]
    },
    // 获取责任单位list
    getUnitList() {
      this.$request({
        url: '/allocation/unit',
        method: 'get'
      }).then((res) => {
        if (res.code === 0) {
          this.unitList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    getContaminateList() {
      this.$request({
        url: '/allocation/contaminate',
        method: 'get'
      }).then((res) => {
        if (res.code === 0) {
          this.polluteList = res.data
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handeleSumit() {
      this.handleSearch()
    },
    // 提交
    newHandleSubmit(obj) {
      console.log(obj)
      console.log(this.parentFormData)
      let api = '/allocation/insert'
      if (this.pageState !== 'add') {
        api = '/allocation/update'
        // obj.fileBaseList = [...this.parentFormData.fileBaseList, ... obj.fileBaseList]
      }
      this.$request({
        url: api,
        method: 'post',
        data: {
          ...obj
        }
      }).then((res) => {
        if (res.code === 0) {
          this.centerDialogVisible = false

          this.handleSearch()
        } else {
          this.$message.error(res.message)
        }
      })
    },
    handleSearch(obj) {
      this.searchData.isInvalid = 0
      if (obj) {
        this.searchData = obj
      }
      this.$request({
        url: '/allocation/page',
        method: 'post',
        data: {
          ...this.searchData,
          'page': this.pagination
        }
      }).then((res) => {
        if (res.code === 0) {
          this.tableData = res.data.list
          this.pagination.totalCount = res.data.page.totalNum
        } else {
          this.$message.error(res.message)
        }
      })
    },
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.pagination.pageSize = val
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.pagination.currentPage = 1
      this.handleSearch()
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.pagination.currentPage = val
      this.handleSearch()
      // console.log(val)
    },
    openWorkOrdinDialog(row, type) {
      this.$request({
        url: '/allocation/detail',
        method: 'get',
        params: {
          id: row.allocationId
        }
      }).then((res) => {
        this.parentFormData = res.data
        this.workOrdinDialogVisible = true
        if (type === 'work') {
          this.dialogData = {
            title: '整改交办单',
            parentFormData: res.data,
            pageType: 'work',
            pageState: 'approve',
            sysCode: '1010202'
          }
        } else if (type === 'approve') {
          this.dialogData = {
            title: '审批交办单',
            parentFormData: res.data,
            pageType: 'approve',
            pageState: 'approve',
            sysCode: '1010203'
          }
        } else if (type === 'detail') {
          this.dialogData = {
            title: '交办单',
            parentFormData: res.data,
            pageType: 'detail'
          }
        } else if (type === 'delay') {
          this.dialogData = {
            title: '延期交办单',
            parentFormData: res.data,
            pageType: 'delay',
            pageState: 'approve',
            sysCode: '1251701'
          }
        }
      })
    }
  }
}
</script>

<style scoped lang="scss">
.main{
    padding: 20px;
    padding-top: 0px;
    height: 100%;
    overflow: overlay;
}
.tab {
    margin-top: 0px;
   /deep/ .el-tag{
      font-size: 16px;
    }
}
// /deep/ .el-table__body-wrapper {
//     overflow: scroll;
//     position: relative;
//     overflow-x: hidden;
//     max-height: 400px;
// }
.pagina{
    margin-top: 10px;
}
/deep/ .el-table__row{
  font-size: 18px;
}
.el-pagination {
  padding: 0;
  .el-select{
    /deep/.el-input{
      margin:0;
    }
  }

}
.errorClass{
  color: red;
}
</style>