soc_web/src/views/check/task/index.vue

<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--机构数据-->
      <el-col :span="4" :xs="24">
        <org-tree
          v-model="queryParams.orgId"
          @defaultKey="getDefaultKey"
          @checkChange="checkChange"
          @click="clickTreeNode"
          :businessTree="true"
        ></org-tree>
      </el-col>
      <el-col :span="20" :xs="24">
        <!--    搜索条件    -->
        <el-form
          :model="queryParams"
          ref="queryParams"
          size="small"
          :inline="true"
          v-show="showSearch"
          label-width="100px"
        >
          <el-form-item label="任务名称" prop="title">
            <el-input
              style="width: 200px"
              v-model="queryParams.title"
              placeholder="请输入任务名称"
              clearable
              @keyup.enter.native="handleQuery"
              :maxlength="50"
              @input="inputTitle"
            />
          </el-form-item>
          <el-form-item label="检查人员" prop="roleId">
            <el-select
              v-model="queryParams.roleId"
              placeholder="请选择用户角色"
              clearable
            >
              <el-option
                v-for="item in selectRoleOptions"
                :key="item.id"
                :label="item.roleName"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="受检机构" prop="orgName">
            <!-- <el-input
              v-model="queryParams.orgName"
              placeholder="请输入受检机构"
              clearable
              @keyup.enter.native="handleQuery"
              :maxlength="50" @input="inputRestriction"
            /> -->
            <div style="width: 200px; height: 30px">
              <org-tree-select
                size="mini"
                v-model="queryParams.checkOrgIds"
                ref="checkorgTreeSelect"
                :disable="true"
                @change="getList"
              >
              </org-tree-select>
            </div>
          </el-form-item>
          <el-form-item label="任务进度" prop="status">
            <el-select
              style="width: 200px"
              v-model="queryParams.status"
              placeHolder="请选择任务进度"
              clearable
            >
              <el-option
                v-for="item in dict.type.safety_check_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item>
          <!-- <el-form-item label="检查周期" prop="executeCycle">
            <el-select
              v-model="queryParams.executeCycle"
              placeHolder="请选择检查周期"
              @change="changeType($event)"
            >
              <el-option
                v-for="item in dict.type.resumption_plan_cycle"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </el-form-item> -->

          <!-- <el-form-item
            class="searchTitle"
            label="开始日期"
            prop="planStartTime"
          >
            <el-date-picker
              style="width: 200px;"
              v-model="queryParams.planStartTime"
              :clearable="timeClearable"
              type="date"
              placeholder="选择时间"
              value-format="yyyy-MM-dd"
              @change="updatePlanStartTime"
            >
            </el-date-picker>
          </el-form-item> -->
          <el-form-item
            class="searchTitle"
            label="任务时间"
            prop="planStartTime"
          >
            <el-date-picker
              type="daterange"
              value-format="yyyy-MM-dd HH:mm:ss"
              :default-time="['00:00:00', '23:59:59']"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              v-model="queryParams.range"
              :picker-options="pickerOptions"
            >
            </el-date-picker>
          </el-form-item>
          <el-row>
            <el-form-item style="margin-left: 35px">
              <el-button
                type="primary"
                icon="el-icon-search"
                size="mini"
                @click="getList"
                >搜索</el-button
              >
              <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
                >重置</el-button
              >
              <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd"
                >临时登记</el-button
              >
            </el-form-item>
          </el-row>
        </el-form>
        <!--    按纽    -->
        <el-row :gutter="10" class="mb8">
          <!-- <el-col :span="1.5">
            <el-button
              type="primary"
              plain
              icon="el-icon-download"
              size="mini"
              @click="exportExcel()"
              v-hasPermi="['resumption:taskManager:export']"
              >导出</el-button
            >
          </el-col> -->

          <right-toolbar
            :showSearch.sync="showSearch"
            @queryTable="getList"
            :columns="columns"
          ></right-toolbar>
        </el-row>
        <el-table
          border
          height="600"
          size="small"
          v-loading="loading"
          :data="pageData"
        >
          <el-table-column
            type="index"
            fixed
            min-width="50"
            label="序号"
            v-if="columns[0].visible"
          >
          </el-table-column>
          <el-table-column
            prop="title"
            label="任务名称"
            min-width="120"
            v-if="columns[1].visible"
          >
          </el-table-column>
          <el-table-column
            prop="checkOrgName"
            label="检查主体"
            min-width="140"
            v-if="columns[5].visible"
          >
          </el-table-column>
          <el-table-column
            prop="roleName"
            label="检查人员"
            min-width="150"
            v-if="columns[6].visible"
          >
            <template slot-scope="r">
              {{
                r.row.roles ? r.row.roles.map((r) => r.roleName).join("||") : ""
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="任务进度"
            width="100px"
            v-if="columns[10].visible"
          >
            <template slot-scope="r">
              <span>
                <!-- <i class="circle" :style="statusColor(r.row.status, true)" /> -->
                <!-- <label :style="statusColor(r.row.status, false)"> -->
                  <label >
                 {{
                    getLabel(dict.type.safety_check_status, r.row.status)
                  }}</label
                >
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="orgName"
            label="受检机构"
            min-width="140"
            v-if="columns[4].visible"
          >
          </el-table-column>

          <el-table-column
            prop="planStartTime"
            label="任务时间"
            min-width="200"
            v-if="columns[2].visible"
            ><template slot-scope="r">
              {{
                r.row.planStartTime
                  ? dayjs(r.row.planStartTime).format("YYYY年-MM月-DD日")
                  : ""
              }}~{{
                r.row.planEndTime
                  ? dayjs(r.row.planEndTime).format("YYYY年-MM月-DD日")
                  : ""
              }}
            </template></el-table-column
          >
          <el-table-column
            prop="planEndTime"
            label="截止日期"
            min-width="100"
            v-if="false"
            ><template slot-scope="r">
              {{
                r.row.planEndTime
                  ? dayjs(r.row.planEndTime).format("YYYY-MM-DD")
                  : ""
              }}
            </template></el-table-column
          >

  

          <el-table-column
            prop="submitBy"
            label="检查人"
            min-width="100"
            v-if="false"
          ></el-table-column>
          <el-table-column 
            label="检查时间"
            min-width="120"
            v-if="false"
          >
            <template slot-scope="r">{{
              r.row.submitTime | dateTime
            }}</template>
          </el-table-column>
          <el-table-column
            prop="exceptionCount"
            label="隐患问题数"
            min-width="80"
            v-if="columns[9].visible"
          >
          </el-table-column>
          <el-table-column
            prop="des"
            label="备注"
            min-width="80"
            v-if="false"
          >
          </el-table-column>
          <el-table-column label="操作" fixed="right" min-width="200">
            <template slot-scope="r">
              <!-- <el-button v-if="
                            r.row.status == 'WAIT' &&
                            queryParams.type == 'QUARTER'
                        " type="text" @click="onEdit(r.row.id)">检查</el-button>
                        <el-button v-else-if="
                            r.row.status != 'NA' &&
                            r.row.status != 'NOT' &&
                            r.row.status != 'WAIT'
                        " type="text" @click="onEdit(r.row.id, { isRead: true })">查看</el-button> -->
              <el-button
                type="text"
                @click="showDetail(r.row)"
                v-hasPermi="['resumption:taskManager:query']"
                >详情</el-button
              >
              <el-button
                type="text"
                @click="showscanRecord(r.row)"
                v-hasPermi="['resumption:taskManager:query']"
                >检查登记簿</el-button
              >
              <el-button
                type="text"
                @click="showRegister(r.row)"
                v-if="showRegisterBtn(r.row)"
                >任务登记</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="queryParams.pageNum"
          :limit.sync="queryParams.pageSize"
          @pagination="getList"
        />
      </el-col>
    </el-row>
    <!-- 详情 -->
    <dialog-detail ref="detaildialog"></dialog-detail>
    <dialog-scan-record ref="scanrecorddialog"></dialog-scan-record>
    <dialog-temporary-task  ref="dialogtemporarytask" @success="getList"></dialog-temporary-task>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import { allRole } from "@/api/system/role";
import DialogDetail from "./dialog.detail";
import DialogScanRecord from "./dialog.scanrecord";
import DataRangePicker from "@/components/dateTime/daterange.picker.vue";
import OrgTree from "@/components/orgTree";
import * as api from "@/api/safetycheck/task.js";
import { getLabel } from "@/views/commonOption.js";
import OrgTreeSelect from "@/components/orgTreeSelect";
import { checkPermi } from "@/utils/permission.js";
import dayjs from "dayjs";
import DialogTemporaryTask from "@/views/safetycheck/taskManager/components/dialog.temporarytask.vue"
export default {
  name: "checkTaskList",
  dicts: ["resumption_plan_cycle", "resumption_status", "safety_check_status"],
  components: {
    DialogDetail,
    DialogScanRecord,
    DataRangePicker,
    OrgTreeSelect,
    OrgTree,
    DialogTemporaryTask
  },
  data() {
    return {
      loading: false,
      showSearch: true,
      total: 0,
      timeClearable: false,
      options: [],
      roleOptions: [],
      selectRoleOptions: [],
      planList: [],

      queryParams: {
        checkSub: true,
        orgId: null,
        orgName: null,
        status: null,
        planId: null,
        pageNum: 1,
        pageSize: 10,
        planStartTime: null,
        title: null,
        checkOrgIds: null,
        range:[],
      },
      selectedOrgName: null,
      pageData: [],
      columns: [
        { key: 0, label: `序号`, visible: true },
        { key: 1, label: `计划名称`, visible: true },
        { key: 2, label: `开始时间`, visible: true },
        { key: 3, label: `结束时间`, visible: true },
        { key: 4, label: `上级机构`, visible: true },
        { key: 5, label: `检查机构`, visible: true },
        { key: 6, label: `检查角色`, visible: true },
        { key: 7, label: `提交人`, visible: true },
        { key: 8, label: `提交时间`, visible: true },
        { key: 9, label: `异常个数`, visible: true },
        { key: 10, label: `任务状态`, visible: true },
      ],
    };
  },
  props: {},
  watch: {
    statusVal(value) {
      if (value == undefined) return;
      if (value == "all") this.queryParams.status = null;
      else this.queryParams.status = value;
    },
    planVal(value) {
      if (value == undefined) return;
      if (value == -1) this.queryParams.planId = null;
      else this.queryParams.planId = value;
    },
    $route(v) {
      //this.queryParams.type = this.$route.params.type.toUpperCase();
    },
    // 0每日；1每周；2每月；3每季度；4每半年；5每年
  },
  computed: {
    ...mapGetters(["orgName", "userId", "roleList", "orgId"]),
  },
  methods: {
    dayjs,
    updatePlanStartTime(value) {
      // console.log(this.queryParams.planStartTime,"前");
      this.queryParams.planStartTime = value;
      // console.log(this.queryParams.planStartTime,"后");
    },
    inputRestriction() {
      // 限制只允许输入汉字、英文和数字
      this.queryParams.orgName = this.queryParams.orgName.replace(
        /[^\u4e00-\u9fa5a-zA-Z0-9]/g,
        ""
      );
    },
    inputTitle() {
      // 限制只允许输入汉字、英文和数字
      this.queryParams.title = this.queryParams.title.replace(
        /[^\u4e00-\u9fa5a-zA-Z0-9]/g,
        ""
      );
    },
    getLabel,
    showDetail(row) {
      let path = "/core/safetycheck/register/" + row.id;
      this.$router.push(path);
    },
    showscanRecord(row) {
      this.$refs.scanrecorddialog.show(row.id, row.orgId);
    },
    showRegisterBtn(row) {
      let userRoleId = this.roleList.map((r) => r.roleId);
      let taskRoleId = row.roles.map((r) => r.roleId);

      return (
        row.status != 3 &&
        ((row.checkOrgId == this.orgId &&
          userRoleId.find((ur) => taskRoleId.includes(ur)) &&
          checkPermi([
            "core:safetycheck:register",
            "core:safetycheck:grant",
          ])) ||
          row.grantUserId === this.userId)
      );
    },
    showRegister(row) {
      let path = "/core/safetycheck/register/" + row.id + "?mode=register";
      this.$router.push(path);
    },
    getDefaultKey(key) {
      this.queryParams.orgId = key;
      this.selectedOrgName = this.orgName;
      this.getList();
      this.loadRoles(key);
      // this.loadPlanList();
    },
    //单选框状态改变
    checkChange(state) {
      this.queryParams.checkSub = state;

      this.getList();
    },
    // 节点单击事件
    clickTreeNode(data) {
      this.queryParams.orgId = data.id;
      this.selectedOrgName = data.name;
      // this.loadPlanList();
      this.loadRoles();
      this.getList();
    },
    resetQuery() {
      this.queryParams.checkOrgIds = [];
      this.queryParams.range=[];
      this.resetForm("queryParams");
      this.getList();
    },
    handleAdd(){
this.$refs["dialogtemporarytask"].show();
    },
    async getList() {
      console.log(this.queryParams, "this.queryParams");
      this.loading = true;
      api
        .page(this.queryParams)
        .then((r) => {
          this.isTableHaveData = r.rows.length > 0;
          this.pageData = r.rows;
          this.total = r.total;
          this.loading = false;
        })
        .catch((e) => {
          this.loading = false;
        });
    },
    loadRoles() {
      api
        .getRoles({
          orgId: this.queryParams.orgId,
          planCycle: this.queryParams.executeCycle,
        })
        .then((r) => (this.roleOptions = r.data));
    },
    selectLoadRoles() {
      allRole().then((r) => (this.selectRoleOptions = r.data));
    },
    // loadPlanList() {
    //   api
    //     .getPlans({
    //       orgId: this.queryParams.orgId,
    //       // planCycle: this.queryParams.executeCycle,
    //     })
    //     .then((r) => {
    //       this.planList = r.data;
    //     });
    // },

    statusColor(status, isBackground) {
      let color = "";
      switch (status) {
        case "1":
          color = "#BFBFBF";
          break;
        case "2":
          color = "#1890FF";
          break;
        case "3":
          color = "#52C41A";
          break;
        case "4":
          color = "#F5222D";
          break;
      }

      if (isBackground) {
        return "background-color:" + color;
      } else {
        return "color:" + color;
      }
    },
  },
  async mounted() {
    this.selectLoadRoles();
  },
};
</script>

<style lang="scss"></style>