zhgdyun/src/views/projectFront/quality/businessModule/checkPoint.vue

<template>
  <!-- 检查部位 -->
  <vue-scroll style="height: 100%">
    <div class="checkPoint">
      <el-button type="primary" size="medium" @click="newRootNode"
        v-permission="{key: 'business_add', menuPath: '/project/quality/business'}"
        >新增区域</el-button
      >
      <el-table
        :data="tableData"
        style="width: 100%; margin: 20px 0"
        row-key="id"
        default-expand-all
        :tree-props="{ children: 'children' }"
        class="tables"
      >
        <el-table-column
          prop="regionName"
          :label="$t('message.quality.regionName')"
        >
        </el-table-column>
        <el-table-column
          align="center"
          prop="regionCode"
          :label="$t('message.quality.coding')"
        >
        </el-table-column>
        <el-table-column align="center" prop="enterpriseName" label="责任单位">
        </el-table-column>
        <el-table-column
          align="center"
          prop="dutyUserName"
          :label="$t('message.quality.rectificationPeople')"
        >
        </el-table-column>
        <!-- <el-table-column
        align="center"

          prop="intendanceNames"
          :label="$t('message.quality.notifier')"
        >
        </el-table-column> -->
        <el-table-column align="center" prop="aiAnalyseHardName" label="AI设备">
        </el-table-column>
        <el-table-column
          prop="remark"
          :label="$t('message.quality.explain')"
          align="center"
        >
        </el-table-column>
        <el-table-column
          prop="remark"
          :label="$t('message.quality.operation')"
          align="center"
        >
          <template slot-scope="scope">
            <div class="flex2 edit">
              <!-- <img src="@/assets/images/icon-edit.png" /> -->
              <el-button type="text" @click="editBtn(scope.row)"
                v-permission="{key: 'business_edit', menuPath: '/project/quality/business'}">{{
                $t("message.quality.compile")
              }}</el-button>
              <el-button type="text" @click="newJuniorBtn(scope.row)"
                v-permission="{key: 'business_add', menuPath: '/project/quality/business'}">{{
                $t("message.quality.newJunior")
              }}</el-button>
              <el-button type="text" @click="deleteBtn(scope.row)"
                v-permission="{key: 'business_delete', menuPath: '/project/quality/business'}">{{
                $t("message.quality.delete")
              }}</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <el-dialog
      :modal-append-to-body="false"
      @close="close"
      :title="title"
      :visible.sync="editDialog"
      width="666px"
    >
      <div class="dialog_content">
        <el-form
          ref="form"
          :model="form"
          :rules="rules"
          label-width="80px"
          size="medium"
        >
          <el-form-item
            :label="$t('message.quality.regionName')"
            prop="regionName"
            :rules="[
              {
                required: true,
                message:
                  $t('message.quality.pleaseEnter') +
                  $t('message.quality.regionName'),
                trigger: 'blur',
              },
            ]"
          >
            <el-input
              placeholder="请输入区域名称"
              v-model="form.regionName"
              :disabled="dialogType == 2"
            ></el-input>
          </el-form-item>
          <!-- 责任单位 -->
          <el-form-item label="责任单位" prop="dutyId">
            <el-select
              v-model="form.dutyId"
              multiple
              filterable
              @change="changeDutyId"
              :placeholder="$t('message.quality.pleaseSelect')"
              style="width: 100%"
              prop="dutyId"
              clearable
            >
              <el-option
                v-for="item in enterpriseInfoList"
                :key="item.id"
                :label="item.enterpriseName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 责任人 start -->
          <el-form-item label="责任人" prop="personId">
            <el-select
              v-model="form.personId"
              filterable
              multiple
              reserve-keyword
              :placeholder="$t('message.quality.pleaseSelect')"
              style="width: 100%"
              prop="personId"
              clearable
            >
              <el-option
                v-for="item in notifierOrPeopleList"
                :key="item.userId"
                :label="item.realName"
                :value="item.userId"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 责任人 end -->

          <!-- <el-form-item :label="$t('message.quality.notifier')">
            <el-select
              v-model="form.intendanceIds"
              filterable
              @change="changeIntendanceIds"
              multiple
              prop="intendanceIds"
              :placeholder="$t('message.quality.pleaseSelect')"
              style="width: 100%"
            >
              <el-option
                v-for="item in notifierOrPeopleList"
                :key="item.userId"
                :label="item.workerName"
                :value="item.userId"
              >
                <span style="float: left">{{ item.realName }}</span> -->
          <!--                <span-->
          <!--                  style="-->
          <!--                    float: right;-->
          <!--                    color: #aaaaaa;-->
          <!--                    font-size: 13px;-->
          <!--                    margin-right: 24px;-->
          <!--                  "-->
          <!--                  >{{ $t('message.quality.phoneNumber') }}：{{-->
          <!--                    item.userTel-->
          <!--                      ? item.userTel.substring(0, 3) +-->
          <!--                        "****" +-->
          <!--                        item.userTel.substring(7)-->
          <!--                      : ""-->
          <!--                  }}</span-->
          <!--                >-->
          <!-- </el-option>
            </el-select>
          </el-form-item> -->
          <!-- AI设备 -->
          <el-form-item label="AI设备" prop="aiDeviceId">
            <el-select
              v-model="form.aiDeviceId"
              multiple
              :placeholder="$t('message.quality.pleaseSelect')"
              style="width: 100%"
              clearable
            >
              <el-option
                v-for="item in aiDeviceList"
                :key="item.id"
                :label="item.hardwareName"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item :label="$t('message.quality.explain')">
            <el-input
              prop="remark"
              v-model="form.remark"
              type="textarea"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <!-- <el-checkbox-group v-model="showList">
              <el-checkbox :label="1" name="type"
                >{{ $t("message.quality.rectificationPeople")
                }}{{ $t("message.quality.copyToSubordinate") }}</el-checkbox
              >
              <el-checkbox :label="2" name="type"
                >{{ $t("message.quality.notifier")
                }}{{ $t("message.quality.copyToSubordinate") }}</el-checkbox
              >
            </el-checkbox-group> -->
          </el-form-item>
        </el-form>
      </div>
      <div class="dialog-footer">
        <el-button
          class="cancleBtn"
          @click="editDialog = false"
          icon="el-icon-circle-close"
          size="medium"
          >{{ $t("message.alarmValueSet.cancel") }}
        </el-button>
        <el-button
          type="primary"
          icon="el-icon-circle-check"
          @click="submit('form')"
          size="medium"
          >{{ $t("message.alarmValueSet.save") }}
        </el-button>
      </div>
    </el-dialog>
  </vue-scroll>
</template>
<script>
import {
  addQualityRegionApi,
  getQualityRegionListApi,
  deleteQualityRegionListApi,
  editQualityRegionListApi,
} from "@/assets/js/api/quality.js";
import {
  getProjectChilderSystemUserListApi,
  getEnterpriseInfoListApi,
} from "@/assets/js/api/configManage.js";
import { aiAnalyseHardWareRecordList } from "@/assets/js/api/equipmentCenter/electricBox";
export default {
  data() {
    return {
      title: this.$t("message.quality.NewRootNode"),
      dialogType: 1,
      projectSn: "",
      notifierOrPeopleList: [],
      enterpriseInfoList: [],
      value: "",
      tableData: [],
      editDialog: false,
      form: {
        regionName: "",
        dutyId: "",
        aiDeviceId: "",
        personId: null,
        intendanceIds: [],
        intendanceNames: "",
        remark: "",
        enterpriseName: "",
      },
      showList: [],
      rules: {
        aiDeviceId: [
          {
            required: true,
            message: "请选择AI设备",
            trigger: "change",
          },
        ],
        dutyId: [
          {
            required: true,
            message: "请输入责任单位",
            trigger: "change",
          },
        ],
        personId: [
          {
            required: true,
            message: "请输入责任人",
            trigger: "change",
          },
        ],
      },
      aiDeviceList: [],
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getQualityRegionList();
    this.getUpdateUnitListFn();
    this.getAIDeviceFn();
  },
  methods: {
    // 获取AI设备
    getAIDeviceFn() {
      aiAnalyseHardWareRecordList({
        projectSn: this.$store.state.projectSn,
      }).then((result) => {
        if (result.success) {
          this.aiDeviceList = result.result;
          console.log("列表", result);
        }
      });
    },
    // 获取列表信息
    getQualityRegionList() {
      let data = {
        projectSn: this.projectSn,
      };
      getQualityRegionListApi(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.tableData = res.result;
        }
      });
    },

    //新增根节点按钮
    newRootNode() {
      this.form = {
        regionName: "",
        dutyId: [],
        personId: [],
        aiDeviceId: "",
        intendanceIds: [],
        intendanceNames: "",
        remark: "",
      };
      this.notifierOrPeopleList = [];
      this.editDialog = true;
      this.title = "新增区域";
      this.dialogType = 1;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    //切换 整改人
    changeDutyId(value) {
      console.log(value);
      console.log(this.form, 666777);
      console.log(this.notifierOrPeopleList, 888999);
      if (this.form.dutyId.length > 0) {
        let shouldHavePersonIdList = this.notifierOrPeopleList.map((item) => {
          if (this.form.dutyId.includes(item.enterpriseId)) {
            return item.userId;
          }
        });
        const newArr = this.form.personId.filter((item) =>
          shouldHavePersonIdList.includes(item)
        );
        this.form.personId = newArr;
      } else {
        this.form.personId = [];
      }
      this.getUpdatePersonListFn();
    },
    //切换 通知人
    changeIntendanceIds(value) {
      let arrList = this.notifierOrPeopleList;
      let nameArr = [];
      for (let i = 0; i < value.length; i++) {
        for (let j = 0; j < arrList.length; j++) {
          if (arrList[j].userId == value[i]) {
            nameArr.push(arrList[j].workerName);
          }
        }
      }
      this.form.intendanceNames = nameArr.length > 0 ? nameArr.join(",") : "";
    },

    //编辑按钮
    editBtn(value) {
      if (value.intendanceIds == "" || value.intendanceIds == null) {
        this.form.intendanceIds = null;
      } else {
        this.form.intendanceIds = value.intendanceIds.split(",");
      }
      console.log("编辑", value);
      this.form.regionName = value.regionName;
      if (value.enterpriseInfos && value.enterpriseInfos.length > 0) {
        this.form.dutyId = value.enterpriseInfos.map((item) => {
          return item.id;
        });
        this.getUpdatePersonListFn();
      }
      if (value.systemUsers && value.systemUsers.length > 0) {
        const newArr = [];
        value.systemUsers.map((item) => {
          if (item.userId) {
            newArr.push(item.userId);
          }
        });
        this.form.personId = newArr;
        console.log(this.form.personId, 123456789);
      }
      if (value.aiAnalyseHardWareRecords && value.aiAnalyseHardWareRecords.length > 0) {
        this.form.aiDeviceId = value.aiAnalyseHardWareRecords.map((item) => {
          return item.id;
        });
      } else {
        this.form.aiDeviceId = []
      }
      this.form.remark = value.remark;
      this.form.id = value.id;
      this.title = "编辑区域";
      this.dialogType = 2;
      this.editDialog = true;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    //新增下级---按钮
    newJuniorBtn(value) {
      console.log(value);
      this.form = {
        regionName: "",
        dutyId: "",
        aiDeviceId: "",
        intendanceIds: [],
        intendanceNames: "",
        remark: "",
      };
      this.form.parentRegion = value.id;
      // console.log(this.form)
      this.editDialog = true;
      this.title = this.$t("message.quality.newJunior");
      this.dialogType = 3;
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
    // 获取整改单位列表
    getUpdateUnitListFn() {
      getEnterpriseInfoListApi({ projectSn: this.projectSn }).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.enterpriseInfoList = res.result;
        }
      });
    },
    // 获取整改人列表
    getUpdatePersonListFn() {
      let data = {
        projectSn: this.projectSn,
        enterpriseId: this.form.dutyId ? this.form.dutyId.join(",") : "",
      };
      getProjectChilderSystemUserListApi(data).then((res) => {
        console.log(res);
        if (res.code == 200) {
          this.notifierOrPeopleList = res.result;
        }
      });
    },
    // //获取 整改人 通知人下拉列表
    // getNotifierOrPeopleList() {
    //   let data = {
    //     projectSn: this.projectSn,
    //     enterpriseId: this.enterpriseId
    //   }
    //   getProjectChilderSystemUserListApi(data).then((res) => {
    //     console.log(res);
    //     if (res.code == 200) {
    //       console.log('------整改人', res)
    //       console.log('------form', this.form)
    //       this.notifierOrPeopleList = res.result
    //     }
    //   })
    //   getEnterpriseInfoListApi({projectSn: this.projectSn}).then(res=>{
    //     console.log(res);
    //     if(res.code==200){
    //       this.enterpriseInfoList = res.result
    //     }
    //   })
    // },
    //弹窗---保存按钮
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            dutyName: this.form.dutyName,
            // dutyId: this.form.dutyId,
            personId: this.form.personId,
            // intendanceIds: this.form.intendanceIds.join(','),
            intendanceNames: this.form.intendanceNames,
            regionName: this.form.regionName,
            remark: this.form.remark,
            projectSn: this.projectSn,
            parentRegion: this.form.parentRegion,
          };
          if (this.form.aiDeviceId && this.form.aiDeviceId.length > 0) {
            data.aiAnalyseHardWareRecords = this.form.aiDeviceId.map((item) => {
              return { id: item };
            });
          }
          if (this.form.dutyId && this.form.dutyId.length > 0) {
            data.enterpriseInfos = this.form.dutyId.map((item) => {
              return { id: item };
            });
          }
          if (this.form.personId && this.form.personId.length > 0) {
            console.log(this.form.personId, 777888);
            data.systemUsers = this.form.personId.map((item) => {
              if (item) {
                return { userId: item };
              }
            });
          }
          if (this.dialogType == 1) {
            addQualityRegionApi(data).then((res) => {
              // console.log(res);
              if (res.code == 200) {
                this.$message.success(this.$t("message.quality.newSuccess"));
                this.editDialog = false;
                this.getQualityRegionList();
              }
            });
          } else if (this.dialogType == 2) {
            data.id = this.form.id;
            editQualityRegionListApi(data).then((res) => {
              if (res.code == 200) {
                this.editDialog = false;
                this.$message.success(res.message);
                this.getQualityRegionList();
              }
            });
          } else if (this.dialogType == 3) {
            data.parentRegion = this.form.parentRegion;
            addQualityRegionApi(data).then((res) => {
              if (res.code == 200) {
                this.$message.success(this.$t("message.quality.newSuccess"));
                this.editDialog = false;
                this.getQualityRegionList();
              }
            });
          }
        } else {
          return false;
        }
      });
    },
    //删除 按钮
    deleteBtn(value) {
      this.$confirm(
        this.$t("message.quality.deleteHint"),
        this.$t("message.quality.hint"),
        {
          confirmButtonText: this.$t("message.quality.confirm"),
          cancelButtonText: this.$t("message.quality.cancel"),
          type: "warning",
        }
      )
        .then(() => {
          let data = {
            id: value.id,
          };

          deleteQualityRegionListApi(data).then((res) => {
            if (res.code == 200) {
              this.$message({
                type: "success",
                message: this.$t("message.quality.successfullyDelete") + "!",
              });
              this.getQualityRegionList();
            }
          });
        })
        .catch(() => {});
    },

    close() {
      this.$nextTick(() => {
        this.$refs["form"].clearValidate();
      });
    },
  },
};
</script>
<style lang="less" scoped>
.flex {
  display: flex;
}
.flex2 {
  display: flex;
  align-items: center;
}
.checkPoint {
  padding: 16px 20px;
  box-sizing: border-box;
  .edit {
    width: 100%;
    justify-content: center;
    cursor: pointer;
    img {
      margin-right: 5px;
    }
  }
}
</style>