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">新增区域</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="regionCode"
          :label="$t('message.quality.unit')"
        >
        </el-table-column>
        <el-table-column
        align="center"

          prop="dutyName"
          :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 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)">{{
                $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
            placeholder="请输入区域名称"
              v-model="form.regionName"
              :disabled="dialogType == 2"
            ></el-input>
          </el-form-item>
          <!-- 责任单位 start -->
          <el-form-item :label="$t('message.quality.personWork')">
            <el-select
              v-model="form.dutyId"
              filterable
              multiple 
              @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"
              >
                <span style="float: left">{{ item.enterpriseName }}</span>
              </el-option>
            </el-select>
          </el-form-item>
          <!-- 责任单位 end -->
          <!-- 责任人 start -->
          <el-form-item :label="$t('message.quality.personLiable')">
            <el-select
              v-model="form.personId"
              filterable
              multiple
              @change="changeDutyId"
              :placeholder="$t('message.quality.pleaseSelect')"
              style="width: 100%"
              prop="personId"
              clearable
            >
              <el-option
                v-for="item in notifierOrPeopleList"
                :key="item.userId"
                :label="item.notifierOrPeopleList"
                :value="item.userId"
              >
                <span style="float: left">{{ item.realName }}</span>
              </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> -->
          <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'
export default {
  data() {
    return {
      title: this.$t('message.quality.NewRootNode'),
      dialogType: 1,
      projectSn: '',
      notifierOrPeopleList: [],
      enterpriseInfoList:[],
      value: '',
      tableData: [],
      editDialog: false,
      form: {
        regionName: '',
        dutyId: '',
        personId: [],
        intendanceIds: [],
        intendanceNames: '',
        remark: '',
        enterpriseName:''
      },
      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.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) {
      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
      this.form.dutyId = value.dutyId ? value.dutyId : ''
      this.form.remark = value.remark
      this.form.id = value.id
      this.title = '编辑区域'
      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,
        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 = {
            dutyId: this.form.dutyId,
            dutyName: this.form.dutyName,
            // 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.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>