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

<template>
  <div class="app-container">
    <el-row :gutter="10">
      <!--机构数据-->
      <!-- <el-col :span="4" :xs="24">
        <org-tree
          v-model="queryParams.orgId"
          @defaultKey="getDefaultKey"
          @checkChange="checkChange"
          @click="clickTreeNode"
        ></org-tree>
      </el-col> -->
      <el-col :span="24" :xs="24">
        <div class="main-right-box">
          <div class="main-search-box">
            <!--    搜索条件    -->
            <el-form
              :model="queryParams"
              ref="queryParams"
              size="small"
              :inline="true"
              v-show="showSearch"
            >
              <el-form-item label="检查机构">
                <org-tree
                  v-model="queryParams.orgId"
                  @defaultKey="getDefaultKey"
                  @checkChange="checkChange"
                  @click="clickTreeNode"
                ></org-tree>
              </el-form-item>
              <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> -->
                  <tree-select
                    v-model="queryParams.checkOrgIds"
                    :options="deptOptions"
                    :show-count="true"
                    :normalizer="tenantIdnormalizer"
                    :props="{ checkStrictly: true, label: 'name' }"
                    placeholder="请选择组织机构"
                    clearValueText="清除"
                    :noChildrenText="''"
                    noOptionsText="没有数据"
                    noResultsText="没有搜索结果"
                  />
                </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"
              >
                <DataRangePicker
                  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"
                >
                </DataRangePicker>
              </el-form-item>
            </el-form>
            <el-row :gutter="10">
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-search"
                  size="mini"
                  @click="getList"
                  >搜索</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-refresh"
                  size="mini"
                  @click="resetQuery"
                  >重置</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-plus"
                  size="mini"
                  @click="handleAdd"
                  v-hasPermi="['core:safetycheck:tempregister']"
                  >临时登记</el-button
                >
              </el-col>
              <el-col :span="1.5">
                <el-button
                  type="primary"
                  icon="el-icon-download"
                  size="mini"
                  @click="handleExport"
                  v-hasPermi="['system:user:export']"
                  >导出</el-button
                >
              </el-col>
              <right-toolbar
                :showSearch.sync="showSearch"
                @queryTable="getList"
                :columns="columns"
              ></right-toolbar>
            </el-row>

            <!--    按纽    -->
          </div>
          <el-table
            border
            height="596"
            size="small"
            v-loading="loading"
            :data="pageData"
          >
            <el-table-column
              type="index"
              fixed
              align="center"
              width="80px"
              label="序号"
              v-if="columns[0].visible"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="title"
              label="任务名称"
              width="250px"
              :show-overflow-tooltip="true"
              v-if="columns[1].visible"
            >
            </el-table-column>
            <el-table-column
              header-align="center"
              prop="checkOrgName"
              label="检查主体"
              width="180px"
              v-if="columns[2].visible"
            >
            </el-table-column>
            <el-table-column
              prop="roleName"
              label="检查人员"
              align="center"
              width="180px"
              v-if="columns[3].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="任务进度"
              align="center"
              width="120px"
              v-if="columns[4].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="受检机构"
              header-align="center"
              width="180px"
              v-if="columns[5].visible"
            >
            </el-table-column>

            <el-table-column
              prop="planStartTime"
              label="任务时间"
              header-align="center"
              width="300px"
              v-if="columns[6].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="截止日期"
              align="center"
              width="180px"
              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="检查人"
              align="center"
              width="180px"
              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
              align="center"
              prop="exceptionCount"
              label="隐患问题数"
              width="120px"
              v-if="columns[7].visible"
            >
            </el-table-column>
            <el-table-column
              prop="des"
              label="备注"
              align="center"
              width="180px"
              v-if="false"
            >
            </el-table-column>
            <el-table-column
              label="操作"
              fixed="right"
              header-align="center"
              width="240px"
            >
              <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="['core:task:query']"
                  icon="el-icon-view"
                  >详情</el-button
                >
                <el-button
                  type="text"
                  @click="showscanRecord(r.row)"
                  v-if="r.row.status == 2 || r.row.status == 3"
                  v-hasPermi="['core:task:query']"
                  icon="el-icon-view"
                  >扫描记录</el-button
                >
                <el-button
                  type="text"
                  icon="el-icon-s-check"
                  @click="showRegister(r.row)"
                  v-if="showRegisterBtn(r.row)"
                  >任务登记</el-button
                >
                <el-button
                  type="text"
                  slot="reference"
                  icon="el-icon-delete"
                  @click="handleDel(r.row.id)"
                  v-if="
                    r.row.status == 3 &&
                    r.row.submitorId == userId &&
                    r.row.sourceType == 1
                  "
                  >删除</el-button
                >
                <el-button
                  icon="el-icon-document-copy"
                  type="text"
                  v-if="r.row.pdfUrl"
                  @click="onDown(r.row.pdfUrl)"
                  >登记簿
                </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"
          />
        </div>
      </el-col>
    </el-row>
    <!-- 详情 -->
    <dialog-detail ref="detaildialog"></dialog-detail>
    <dialog-scan-record ref="scanrecorddialog"></dialog-scan-record>
  </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/orgQuerySelector.vue";
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 { deptTreeSelect } from "@/api/system/public";
import request from "@/utils/request";
export default {
  name: "Saftask",
  dicts: ["resumption_plan_cycle", "resumption_status", "safety_check_status"],
  components: {
    DialogDetail,
    DialogScanRecord,
    DataRangePicker,
    OrgTreeSelect,
    OrgTree,
  },
  data() {
    return {
      // 机构树选项
      deptOptions: [],
      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 },
      ],
    };
  },
  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"]),
  },
  activated() {
    // console.log("刷新");
    this.getList();
  },
  methods: {
    getDeptTree() {
      deptTreeSelect().then((response) => {
        // console.log(response,"sss")
        this.deptOptions = response.data;
      });
    },
    /** treeSelect组件自定义数据*/
    tenantIdnormalizer(node, instanceId) {
      if (node.children && !node.children.length) {
        delete node.children;
      }
      return {
        id: node.id,
        label: node.shortName,
        children: node.children,
      };
    },
    async onDown(pdfUrl) {
      window.open(pdfUrl);
    },
    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/detail/" + row.id;
      // console.log(path,"path")
      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"])) ||
          row.grantUserId === this.userId)
      );
    },
    showRegister(row) {
      if (
        dayjs().startOf("day").isBefore(dayjs(row.planStartTime).startOf("day"))
      ) {
        this.$modal.alert("任务未到开始时间，不能操作");
        return;
      }

      if (dayjs().endOf("day").isAfter(dayjs(row.planEndTime).endOf("day"))) {
        this.$modal.alert("任务已逾期，不能操作");
        return;
      }

      let path = "/core/safetycheck/register/" + row.id;
      this.$router.push(path);
    },
    getDefaultKey(key) {
      // console.log("wwewe")
      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 = null;
      this.queryParams.range = [];
      this.resetForm("queryParams");
      this.getList();
    },
    handleAdd() {
      let path = "/safetycheck/tempregister/add";
      this.$router.push(path);
    },
    handleDel(taskId) {
      this.$modal
        .confirm("确认删除该临时登记？")
        .then(() => {
          return api.remove(taskId);
        })
        .then((r) => {
          if (r && r.data) {
            this.$message.info("删除成功");
            this.getList();
          } else {
            this.$message.warning("删除失败");
          }
        });
    },
    async getList() {
      // console.log(this.queryParams, "this.queryParams2222");
      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;
    //     });
    // },
    /** 导出按钮操作 */
    handleExport() {
      this.download(
        "core/safetyTask/export",
        {
          ...this.queryParams,
        },
        `${
          this.selectedOrgName +
          "-检查登记跟踪-" +
          this.formatTime(new Date(), "YYYYMMDD")
        }.xlsx`
      );
    },
    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();
  },
  created() {
    this.getDeptTree();
  },
};
</script>

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