shuili-vue/src/views/sluice/runManage/dangerWeakProject/inspectTasks/taskDetails.vue

<!-- 监督检查任务新增 -->
<script>
import dayjs from "dayjs";
import { listUser } from "@/api/management";
import {
  addDangerTaskData,
  getDangerTaskDetailsData,
  putDangerTaskData,
  getDangerGroupingListData,
  getDangerTaskLinkProjectData,
} from "@/api/sluice";
import { codeToText } from "element-china-area-data";
import { getAreasData } from "@/api/areas/index";

export default {
  name: "tasksDetails",
  data() {
    return {
      paramsData: {
        name: "",
        type: null,
        dikeName: "",
        selectLevel: "",
        selectType: "",
      },
      areasOptionProps: {
        emitPath: false,
        checkStrictly: true, //选择任意一级
      },
      areasOptions: [],
      radioValue: "",
      dialogVisible: false,
      prohibitEditing: false,
      enableSupervisionWayData: [], //启用中的检查项
      groupList: [], // 人员列表
      projectList: [], // 工程列表
      tableData: [], // 检查列表
      projectTypeOptions: [], // 工程类型
      engScalOptions: [], // 工程规模
      buildingLevelOptions: [], // 工程级别
      pageData: {
        pageNum: 1, // 当前页
        pageSize: 10, // 请求数量
        pageSizes: [10, 20, 50, 100],
        total: 0, // 总数量
      },
      dialogParams: {
        engineeringManagementUnit: "",
        areaName: "",
      },
      ruleForm: {
        id: null,
        name: "",
        groupId: "",
        startTime: "",
        doneTime: "",
        content: "",
        wagaCode: "",
        wagaName: "",
        wagaList: [],
      },
      rules: {
        name: [
          { required: true, message: "请输入名称", trigger: "blur" },
          { max: 20, message: "名称最长为20个字符", trigger: "blur" },
        ],
        groupId: [{ required: true, message: "请选择小组", trigger: "change" }],
        doneTime: [
          { required: true, message: "请选择时间", trigger: "change" },
        ],
      },
    };
  },
  computed: {
    // 计算时间差
    computedTimes: {
      get() {
        return [this.ruleForm.startTime || "", this.ruleForm.doneTime || ""];
      },
      set(val) {
        this.ruleForm.startTime = val[0] ? val[0] + " 00:00:00" : "";
        this.ruleForm.doneTime = val[1] ? val[1] + " 23:59:59" : "";
      },
    },
    // 计算任务工时
    computedTaskTimes() {
      if (this.ruleForm.startTime && this.ruleForm.doneTime) {
        return (
          dayjs(this.ruleForm.doneTime).diff(
            dayjs(this.ruleForm.startTime),
            "day"
          ) + 1
        );
      }
      return "";
    },
    // 预览模式
    previewMode() {
      return this.$route.query.id && this.$route.query.type === "preview";
    },
    // 编辑模式
    editMode() {
      return this.$route.query.id && this.$route.query.type === "edit";
    },
  },
  methods: {
    getTreeData() {
      getAreasData().then((items) => {
        // console.log("getAreasData", items.data);
        let res = [];
        let getChildren = (res, pid) => {
          for (const i of items.data) {
            if (i.parentid === pid) {
              const newItem = {
                label: i.name,
                value: i.id,
              };
              if (i.layer != 3) newItem.children = [];
              res.push(newItem);
              getChildren(newItem.children, newItem.value);
            }
          }
        };
        getChildren(res, items.data[0].parentid);
        this.areasOptions = res;
        // return res;
      });
    },
    // 获取详情
    getDetails() {
      getDangerTaskDetailsData(this.$route.query.id).then((res) => {
        if (res) {
          this.ruleForm.id = this.$route.query.id;
          this.ruleForm.name = res.data.name;
          this.ruleForm.groupId = res.data.groupId;
          this.ruleForm.startTime = res.data.startTime;
          this.ruleForm.doneTime = res.data.doneTime;
          this.ruleForm.content = res.data.content;
          this.ruleForm.riverLocation = res.data.riverLocation;
          this.ruleForm.adcd = res.data.adcd;
          this.ruleForm.engineeringManagementUnit =
            res.data.engineeringManagementUnit;
          this.ruleForm.wagaList = [
            {
              wagaCode: res.data.wagaCode,
              wagaName: res.data.wagaName,
              mainBuildGrad: res.data.mainBuildGrad,
              engScal: res.data.engScal,
              wagaType: res.data.wagaType,
            },
          ];
        }
      });
    },
    // 搜索用户
    searchGroupList(e = null) {
      getDangerGroupingListData({
        data: {
          timeView: {
            timeField: "create_time",
          },
          name: e ? e : "",
        },
        pageSize: 50,
        pageNum: 1,
      }).then((res) => {
        this.groupList = res.records;
      });
    },
    // 重置校验
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.dialogVisible = false;
    },
    // 获取工程列表
    getProjectList() {
      getDangerTaskLinkProjectData({
        data: {
          pageNum: 1,
          pageSize: 20,
          engineeringManagementUnit:
            this.dialogParams.engineeringManagementUnit,
          adcd: this.dialogParams.adcd,
        },
      }).then((res) => {
        if (res) {
          this.projectList = res.records;
        }
      });
    },
    // 格式化adcd
    formatAdcd(adcd) {
      if (adcd) {
        let provinceCode = adcd.slice(0, 2);
        let cityCode = adcd.slice(2, 4);
        let areaCode = adcd.slice(4, 6);
        if (areaCode != "00") {
          return (
            codeToText[provinceCode] +
            "-" +
            codeToText[provinceCode + cityCode] +
            "-" +
            codeToText[provinceCode + cityCode + areaCode]
          );
        } else if (cityCode != "00") {
          return (
            codeToText[provinceCode] + "-" + codeToText[provinceCode + cityCode]
          );
        } else {
          return codeToText[provinceCode];
        }
      }
    },
    // 获取水闸类型
    formatType(type) {
      if (!type) return "";
      let typeArr = JSON.parse(type);
      let str = "";
      typeArr.forEach((item) => {
        let res = this.projectTypeOptions.find(
          (typeItem) => typeItem.dictValue === item
        );
        if (res) {
          str += res.dictLabel + ",";
        }
      });
      return str.slice(0, -1);
    },
    // 获取工程规模
    formatEngScal(scal) {
      if (!scal) return "";
      let res = this.engScalOptions.find(
        (item) => item.dictValue === scal.toString()
      );
      return res ? res.dictLabel : "";
    },
    // 获取工程级别
    formatLevel(level) {
      if (!level) return "";
      let res = this.buildingLevelOptions.find(
        (item) => item.dictValue === level.toString()
      );
      return res ? res.dictLabel : "";
    },
    // 删除
    handleDelWagaItem(row, index) {
      this.ruleForm.wagaList.splice(index, 1);
    },
    // 提交表单
    handleSubmit() {
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          // 提交表单，二次确认
          this.$confirm("确认提交吗？", "提示", {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          })
            .then(() => {
              let formData = {
                ...this.ruleForm,
                wagaCode: this.ruleForm.wagaList
                  .map((item) => item.wagaCode)
                  .join(","),
                wagaName: this.ruleForm.wagaList
                  .map((item) => item.wagaName)
                  .join(","),
              };
              if (this.$route.query.id) {
                // 编辑
                putDangerTaskData({
                  id: this.$route.query.id,
                  ...formData,
                }).then((res) => {
                  if (res) {
                    this.$message({
                      message: "提交成功",
                      type: "success",
                    });
                    this.$router.go(-1);
                  }
                });
              } else {
                // 新增
                addDangerTaskData(formData).then((res) => {
                  if (res) {
                    this.$message({
                      message: "提交成功",
                      type: "success",
                    });
                    this.$router.go(-1);
                  }
                });
              }
            })
            .catch(() => {
              // 取消提交
            });
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    handleAddPro() {
      this.handleSearchDialogPro();
      this.dialogVisible = true;
    },
    // 检索
    handleSearchDialogPro() {
      this.getProjectList();
    },
    // 关闭弹窗
    handleCloseDialog() {
      this.radioValue = "";
      this.dialogVisible = false;
    },
    // 确认选择
    handleConfirmSelect() {
      if (!this.radioValue) {
        this.$message.error("请选择");
        return;
      }
      let res = this.projectList.find(
        (item) => item.wagaCode === this.radioValue
      );
      if (res) {
        if (
          this.ruleForm.wagaList?.length &&
          this.ruleForm.wagaList.some((item) => item.wagaCode === res.wagaCode)
        ) {
          this.$message.error("已存在相同工程");
          return;
        }
        this.ruleForm.wagaList?.push(res);
      }
      this.radioValue = "";
      this.dialogVisible = false;
    },
    // 返回
    handleGoBack() {
      if (this.previewMode) {
        this.$router.go(-1);
        return;
      }
      // 二次确认返回是否保存数据
      this.$confirm("是否保存信息", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.handleSubmit();
        })
        .catch(() => {
          // 取消返回
          this.$router.go(-1);
        });
    },
  },
  created() {
    this.getDicts("sluice_type").then((response) => {
      this.projectTypeOptions = response.data;
    });
    this.getDicts("engineering_scale").then((response) => {
      this.engScalOptions = response.data;
    });
    this.getDicts("building_level").then((response) => {
      this.buildingLevelOptions = response.data;
    });
    this.searchGroupList();
    this.getTreeData();
  },
  mounted() {
    if (this.$route.query.id) {
      this.getDetails();
    }
  },
};
</script>

<template>
  <div class="body slider-right">
    <div class="top-title">基础信息管理</div>
    <div class="content-box">
      <div class="title">新增/编辑检查项</div>
      <div class="font-14">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
        >
          <div class="flex">
            <el-form-item label-width="120px" label="任务名称" prop="name">
              <el-input
                :disabled="previewMode"
                style="width: 240px"
                v-model="ruleForm.name"
                placeholder="请输入"
              />
            </el-form-item>
            <el-form-item label-width="120px" label="核查小组" prop="groupId">
              <el-select
                style="width: 240px"
                :disabled="previewMode"
                filterable
                remote
                :remote-method="searchGroupList"
                v-model="ruleForm.groupId"
                placeholder="请选择"
              >
                <el-option
                  v-for="item in groupList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </div>
          <div v-if="editMode" class="flex">
            <el-form-item
              label-width="120px"
              label="所属流域"
              prop="riverLocation"
            >
              <el-input
                style="width: 240px"
                :disabled="true"
                :value="ruleForm.riverLocation"
                placeholder=""
              />
            </el-form-item>
            <el-form-item label-width="120px" label="所属区域" prop="adcd">
              <el-input
                style="width: 240px"
                :disabled="true"
                :value="formatAdcd(ruleForm.adcd)"
                placeholder=""
              />
            </el-form-item>
            <el-form-item
              label-width="120px"
              label="管理单位"
              prop="engineeringManagementUnit"
            >
              <el-input
                style="width: 240px"
                :disabled="true"
                :value="ruleForm.engineeringManagementUnit"
                placeholder=""
              />
            </el-form-item>
          </div>
          <div class="flex">
            <el-form-item
              label-width="120px"
              label="开始结束时间"
              prop="doneTime"
            >
              <el-date-picker
                v-model="computedTimes"
                type="daterange"
                :disabled="previewMode"
                style="width: 240px"
                value-format="yyyy-MM-dd"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item
              label-width="120px"
              label="任务工时"
              prop="computedTaskTimes"
            >
              <el-input
                style="width: 240px"
                :value="computedTaskTimes"
                placeholder="请选择开始结束时间"
                :disabled="true"
              >
                <span slot="suffix">天</span>
              </el-input>
            </el-form-item>
          </div>
          <el-form-item label-width="120px" label="检查任务背景" prop="content">
            <el-input
              v-model="ruleForm.content"
              :disabled="previewMode"
              type="textarea"
              :maxlength="500"
              :rows="5"
              placeholder=" 请输入"
            />
          </el-form-item>
        </el-form>

        <!-- 水闸基础信息 -->
        <div class="table-box">
          <el-row class="item-row">
            <el-col :span="2">
              <div class="item-row-content">序号</div>
            </el-col>
            <el-col :span="3">
              <div class="item-row-content">水闸名称</div>
            </el-col>
            <el-col :span="3">
              <div class="item-row-content">水闸代码</div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">工程级别</div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">工程规模</div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">水闸类型</div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">安全类别</div>
            </el-col>
            <el-col :span="3">
              <div class="item-row-content">安全鉴定完成日期</div>
            </el-col>
            <el-col :span="3">
              <div class="item-row-content">安全鉴定评审意见</div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">操作</div>
            </el-col>
          </el-row>
          <el-row
            class="item-row color-333"
            v-for="(item, index) in ruleForm.wagaList"
            :key="index"
          >
            <el-col :span="2">
              <div class="item-row-content">{{ index + 1 }}</div>
            </el-col>
            <el-col :span="3">
              <div class="item-row-content">{{ item.wagaName }}</div>
            </el-col>
            <el-col :span="3">
              <div class="item-row-content">{{ item.wagaCode }}</div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">
                {{ formatLevel(item.mainBuildGrad) }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">
                {{ formatEngScal(item.engScal) }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">
                {{ formatType(item.wagaType) }}
              </div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">
                <!-- 安全类别 -->
              </div>
            </el-col>
            <el-col :span="3">
              <div class="item-row-content">
                <!-- 安全鉴定完成日期 -->
              </div>
            </el-col>
            <el-col :span="3">
              <div class="item-row-content">
                <!-- 安全鉴定评审意见 -->
              </div>
            </el-col>
            <el-col :span="2">
              <div class="item-row-content">
                <el-button
                  type="text"
                  v-if="!previewMode"
                  @click="handleDelWagaItem(item, index)"
                  >删除</el-button
                >
              </div>
            </el-col>
          </el-row>
          <el-row
            v-if="
              (!previewMode && !editMode) ||
              (editMode && (!ruleForm.wagaList || ruleForm.wagaList.length < 1))
            "
          >
            <div class="item-row-content flex justify-center p-4">
              <el-button type="primary" size="small" @click="handleAddPro"
                >添加水闸</el-button
              >
            </div>
          </el-row>
        </div>
      </div>
    </div>
    <div class="bottom-btns flex justify-between">
      <el-button type="primary" @click="handleSubmit" v-if="!previewMode"
        >确认</el-button
      >
      <el-button @click="handleGoBack">返回</el-button>
    </div>

    <!-- 添加水闸弹窗 -->
    <el-dialog
      title="添加水闸"
      :visible.sync="dialogVisible"
      width="800px"
      :close-on-click-modal="false"
    >
      <div>
        <div class="flex items-center">
          <span class="flex-shrink-0">管理单位</span>
          <el-input
            style="width: 240px"
            v-model="dialogParams.engineeringManagementUnit"
            class="ml-10"
          ></el-input>
          <span class="flex-shrink-0 ml-10">所属区域</span>
          <el-cascader
            class="ml-10"
            style="width: 240px"
            :options="areasOptions"
            v-model="dialogParams.adcd"
            :props="areasOptionProps"
            placeholder="请选择行政区划"
            clearable
            size="small"
          >
          </el-cascader>
          <el-button
            @click="handleSearchDialogPro"
            class="!ml-20"
            type="primary"
            >检索</el-button
          >
        </div>
        <div class="mt-20">
          <el-table
            :data="projectList"
            style="width: 100%"
            max-height="400"
            stripe
            border
          >
            <!-- 序号 -->
            <el-table-column
              type="index"
              label="序号"
              width="60"
              align="center"
            ></el-table-column>
            <el-table-column
              prop="wagaName"
              label="水闸名称"
              width="180"
            ></el-table-column>
            <el-table-column
              prop="engineeringManagementUnit"
              label="管理单位"
              width="180"
            ></el-table-column>
            <el-table-column prop="adcd" label="所属区域" width="180">
              <template slot-scope="scope">
                {{ formatAdcd(scope.row.adcd) }}
              </template>
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="80"
              align="center"
            >
              <template slot-scope="scope">
                <el-radio v-model="radioValue" :label="scope.row.wagaCode">{{
                  ""
                }}</el-radio>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="flex justify-end mt-20">
          <el-button @click="handleCloseDialog">取消</el-button>
          <el-button type="primary" class="" @click="handleConfirmSelect"
            >确认</el-button
          >
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped lang="less">
.body {
  width: 100%;
  min-height: calc(100vh - 56px);
  padding-left: 24px;

  .top-title {
    height: 40px;
    background-color: white;
    display: flex;
    padding-left: 16px;
    align-items: center;
    font-weight: 600;
  }

  .content-box {
    width: 100%;
    height: calc(100vh - 56px - 64px);
    margin-top: 24px;
    overflow: auto;
    padding: 16px;
    background-color: white;
    .title {
      font-size: 16px;
      font-weight: 700;
      margin-bottom: 12px;
    }
  }

  .table-box {
    border: 1px solid #ccc;
    border-radius: 4px;
    margin-top: 12px;
    .item-row {
      display: flex;
      .el-col {
        box-sizing: border-box;
      }
      .item-row-content {
        padding: 10px;
        border: 1px solid #ccc;
        height: 100%;
        display: flex;
        align-items: center;
        flex-wrap: wrap;
      }
      .item-row-content2 {
        padding: 0;
        display: flex;
        flex-direction: column;
        align-items: center;
        .title-1 {
          width: 100%;
          padding: 4px;
          text-align: center;
          border-bottom: 2px solid #ccc;
        }
        .title-2 {
          // border-top: 1px solid #ccc;
          & > *:nth-of-type(2) {
            border-left: 2px solid #ccc;
            border-right: 2px solid #ccc;
          }
        }
      }
    }
  }
}
</style>