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"
        >{{$t('message.quality.NewRootNode')}}</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
          prop="regionCode"
          :label="$t('message.quality.coding')"
        >
        </el-table-column>
        <el-table-column
          prop="dutyName"
          :label="$t('message.quality.rectificationPeople')"
        >
        </el-table-column>
        <el-table-column
          prop="intendanceNames"
          :label="$t('message.quality.notifier')"
        >
        </el-table-column>
        <el-table-column prop="remark" :label="$t('message.quality.explain')">
        </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)">{{
                $t("message.quality.compile")
              }}</el-button>
              <el-button type="text" @click="newJuniorBtn(scope.row)"
                >{{$t('message.quality.newJunior')}}</el-button
              >
              <el-button type="text" @click="deleteBtn(scope.row)"
                >{{$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" 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
              v-model="form.regionName"
              :disabled="dialogType == 2"
            ></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.quality.rectificationPeople')">
            <el-select
              v-model="form.dutyId"
              filterable
              @change="changeDutyId"
              :placeholder="$t('message.quality.pleaseSelect')"
              style="width: 100%"
              prop="dutyId"
              clearable
            >
              <el-option
                v-for="item in notifierOrPeopleList"
                :key="item.userId"
                :label="item.workerName"
                :value="item.userId"
              >
                <span style="float: left">{{ item.realName }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <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>
          <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} from "@/assets/js/api/configManage.js"
export default {
  data() {
    return {
      title: this.$t('message.quality.NewRootNode'),
      dialogType: 1,
      projectSn: "",
      notifierOrPeopleList: [],
      value: "",
      tableData: [],
      editDialog: false,
      form: {
        regionName: "",
        dutyId: "",
        intendanceIds: [],
        intendanceNames: "",
        remark: "",
      },
      showList: [],
    };
  },
  created() {
    this.projectSn = this.$store.state.projectSn;
    this.getQualityRegionList();
  },
  methods: {

    // 获取列表信息
    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: "",
        intendanceIds: [],
        intendanceNames: "",
        remark: "",
      };
      this.editDialog = true;
      this.title = this.$t('message.quality.NewRootNode');
      this.dialogType = 1;
      this.getNotifierOrPeopleList();
    },
    //切换 整改人
    changeDutyId(value) {
      for (let i = 0; i < this.notifierOrPeopleList.length; i++) {
        if (value == this.notifierOrPeopleList[i].userId) {
          this.form.dutyName = this.notifierOrPeopleList[i].workerName;
        }
      }
    },
    //切换 通知人
    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) {
      this.form.regionName = value.regionName;
      this.form.dutyId = value.dutyId ? value.dutyId : "";
      this.form.intendanceIds = value.intendanceIds
        ? value.intendanceIds.split(",").map(Number)
        : [];
      this.form.remark = value.remark;
      this.form.id = value.id;
      this.title = this.$t('message.quality.EditorialResponsibilityArea');
      this.dialogType = 2;
      this.getNotifierOrPeopleList();
      this.editDialog = true;
    },
    //新增下级---按钮
    newJuniorBtn(value) {
      console.log(value);
      this.form = {
        regionName: "",
        dutyId: "",
        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.getNotifierOrPeopleList();
    },

    //获取 整改人 通知人下拉列表
    getNotifierOrPeopleList() {
      let data = {
        projectSn: this.projectSn,
      };
      getProjectChilderSystemUserListApi(data).then((res) => {
        // console.log(res);
        if (res.code == 200) {
          console.log('------整改人',res)
          this.notifierOrPeopleList = res.result;
        }
      });
    },
    //弹窗---保存按钮
    submit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          let data = {
            dutyId: this.form.dutyId,
            dutyName: this.form.dutyName,
            intendanceIds:
              this.form.intendanceIds.length > 0
                ? this.form.intendanceIds.join(",")
                : "",
            intendanceNames: this.form.intendanceNames,
            regionName: this.form.regionName,
            remark: this.form.remark,
            projectSn: this.projectSn,
          };
          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() {},
  },
};
</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>