ld-pc/src/views/goods/addFailSafePlan.vue

/**
 * 计划管理 计划列表 新建防错计划
 */
 <template>
  <div style="height: 100%">
    <el-row class="top-main" style="height: 15%;">
      <!-- 面包屑导航 -->
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item>点检管理</el-breadcrumb-item>
        <el-breadcrumb-item>点检保养列表</el-breadcrumb-item>
        <el-breadcrumb-item>
          {{ buttonStatus === 1 ? "新建" : "编辑" }}保养表</el-breadcrumb-item
        >
      </el-breadcrumb>
      <h3>{{ buttonStatus === 1 ? "新建" : "编辑" }}保养表</h3>
    </el-row>
    <el-row class="body-main" style="min-height: 85%">
      <el-card>
        <div slot="header" style="font-size: 20px">
          <span>基础信息</span>
        </div>
        <el-row class="info-full">
          <el-col :span="spanSIX">
            <div class="info-style">点检保养表名称</div>
            <el-input
              size="medium"
              v-model="spotData.name"
              placeholder="请输入点检保养表名称"
            ></el-input>
          </el-col>
          <el-col :offset="spanTWO" :span="spanSIX">
            <div class="info-style">设备编号</div>
            <el-input
              size="medium"
              v-model="spotData.deviceNo"
              placeholder="请输入设备编号"
            ></el-input>
          </el-col>
          <el-col :offset="spanTWO" :span="spanSIX">
            <div class="info-style">设备名称</div>
            <el-input
              size="medium"
              v-model="spotData.deviceName"
              placeholder="请输入设备名称"
            ></el-input>
          </el-col>
        </el-row>
        <el-row class="info-full">
          <el-col :span="spanSIX">
            <div class="info-style">型号</div>
            <el-input
              size="medium"
              v-model="spotData.deviceType"
              placeholder="请输入型号"
            ></el-input>
          </el-col>
          <el-col :offset="spanTWO" :span="spanSIX">
            <div class="info-style">白班责任人</div>
            <el-select
            clearable
              size="medium"
              v-model="spotData.principleOne"
              placeholder="请选择责任人"
              style="width: 100%"
              @visible-change="getPrincipleInfo(1)"
              @change="getPrincipleData"
            >
              <el-option
                v-for="item in principleData"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :offset="spanTWO" :span="spanSIX">
            <div class="info-style">夜班责任人</div>
            <el-select
            clearable
              size="medium"
              v-model="spotData.principleTwo"
              placeholder="请选择责任人"
              style="width: 100%"
              @visible-change="getPrincipleInfo(0)"
              @change="getPrincipleData"
            >
              <el-option
                v-for="item in principleData"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
        <el-row class="info-full">
          <el-col :span="spanSIX">
            <div class="info-style">巡检人</div>
            <el-select
              size="medium"
              v-model="spotData.tourId"
              placeholder="请选择巡检人"
              style="width: 100%"
            >
              <el-option
                v-for="item in tourData"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :offset="spanTWO" :span="spanSIX">
            <div class="info-style">编号</div>
            <el-input
              size="medium"
              v-model="spotData.nos"
              placeholder="请输入编号"
            ></el-input>
          </el-col>
          <el-col :offset="spanTWO" :span="spanSIX">
            <div class="info-style">生效日期</div>
            <el-date-picker
              size="medium"
              v-model="spotData.beginDate"
              type="date"
              time-arrow-control
              style="width: 100%"
              value-format="yyyy-MM-dd"
              placeholder="选择日期"
            >
            </el-date-picker>
          </el-col>
        </el-row>
        <el-row class="info-full">
          <el-col :span="spanSIX">
            <div class="info-style">操作人</div>
            <el-select
              size="medium"
              v-model="spotData.operator"
              placeholder="请选择操作人"
              style="width: 100%"
            >
              <el-option
                v-for="item in operatorData"
                :label="item.name"
                :value="item.id"
                :key="item.id"
              ></el-option>
            </el-select>
          </el-col>
        </el-row>
      </el-card>
      <el-card v-for="(item, index) in procedures" :key="index">
        <div slot="header" style="font-size: 20px; display: flex">
          <div style="width: 5%; line-height: 42px">流程</div>
          <el-input
            size="medium"
            v-model="item.flow"
            placeholder="请输入流程名称"
            style="width: 30%"
          ></el-input>
        </div>
        <el-row
          class="info-full"
          v-for="(iten, indey) in item.projectStandards"
          :key="indey"
        >
          <el-col :span="spanSIX">
            <div class="info-style">项目</div>
            <el-input
              size="medium"
              v-model="iten.longdyProject"
              placeholder="请输入项目"
            ></el-input>
          </el-col>
          <el-col :offset="spanTWO" :span="spanSIX">
            <div class="info-style">标准</div>
            <el-input
              size="medium"
              v-model="iten.standard"
              placeholder="请输入标准"
            ></el-input>
          </el-col>
          <el-col :offset="spanTWO" :span="spanSIX">
            <div class="info-style">检查频次</div>
            <!-- <el-input
                size="medium"
                v-model="iten.frequency"
                placeholder="请选择检查频次"
              ></el-input> -->
            <el-select
              size="medium"
              v-model="iten.frequency"
              placeholder="请选择"
              style="width: 100%"
            >
              <el-option
                v-for="frequency in frequencys"
                :label="frequency.value"
                :value="frequency.id"
                :key="frequency.id"
              ></el-option>
            </el-select>
          </el-col>
          <el-col :span="spanTWO" class="jj-img">
            <img
              v-if="item.projectStandards.length - 1 === indey"
              src="../../assets/img/jia.png"
              @click="addInfo(index)"
            />
            <img
              v-else
              src="../../assets/img/jian.png"
              @click="removeInfo(index, indey)"
            />
          </el-col>
        </el-row>
        <div class="jg-line"></div>
        <div
          class="xx-line"
          v-if="index === procedures.length - 1"
          @click="addFlow"
        >
          新增流程
        </div>
        <div
          class="xx-line"
          v-if="procedures.length !== 1"
          @click="delFlow(index)"
        >
          删除流程
        </div>
      </el-card>
      <el-row style="margin: 50px 0 50px 50px">
        <el-button
          v-if="buttonStatus"
          size="medium"
          type="primary"
          @click="submit(0)"
          :loading="loading"
          >提交</el-button
        >
        <el-button
          v-else
          size="medium"
          type="primary"
          :loading="loading"
          @click="submit(1)"
          >确认</el-button
        >
        <el-button size="medium" @click="$router.back()">取消</el-button>
      </el-row>
    </el-row>
  </div>
</template>
<script>
import {
  insertProofing,
  shiftList,
  getInspector,
  insertProofingInfo,
  getPrinciple,
  getTour,
  updateProofing,
  getOperator
} from "@/api/project";
import { getYyMmDdTimeStamp, getNowDay } from "@/utils/datetime";
export default {
  data() {
    return {
      spotData: {
        name: "",
        deviceNo: "",
        deviceName: "",
        deviceType: "",
        principleOne: "",
        principleTwo: "",
        tourId: "",
        nos: "",
        beginDate: "",
        operator: ""
      },
      // 设备操作人
      operatorData: [],
      procedures: [
        {
          flow: "",
          projectStandards: [
            { longdyProject: "", standard: "", frequency: "" },
          ],
        },
      ],
      // 责任人数据
      principleData: [],
      // 巡检人
      tourData: [],
      spanTWO: 2,
      spanTHREE: 3,
      spanFIVE: 5,
      spanSIX: 6,
      spanSEVEN: 7,
      spanEIGHT: 8,
      spanTWELVE: 12,
      // 频次
      frequencys: [
        { id: 6, value: "每班", show: true },
        { id: 1, value: "每日", show: true },
        { id: 2, value: "每周", show: true },
        { id: 3, value: "每月", show: true },
        { id: 4, value: "季度", show: true },
        { id: 5, value: "半年", show: true }
      ],
      // 检验频次数 默认1
      // verifyNum: 1,
      // 校验日期
      verifyData: "检验响应日期:",
      shiftsList: [],
      userList: [],
      // 检测员列表
      verifyPeopleList: [
        { shiftId: "", shiftName: "", userId: "", userName: "" },
      ],
      // 确认提交按钮 1 提交 0 确认
      buttonStatus: 1,
      loading: false,
      verifyPeoples: [],
      userOne: "",
      oneChange: false,
      userTwo: "",
      twoChange: false,
      shiftOneId: "",
      shiftTwoId: "",
    };
  },
  created() {
    this.getPrincipleData();
    this.getTourData();
    this.getOperatorData()
    if (this.$route.query.id) {
      this.versionId = this.$route.query.id;
      this.buttonStatus = 0;
      this.getUpdateInfo();
    } else {
      this.buttonStatus = 1;
    }
  },
  methods: {
    // 获取修改信息
    getUpdateInfo() {
      this.loading = true;
      insertProofingInfo({ versionId: this.versionId }).then((res) => {
        if (res.status === "20000") {
          let data = res.data;
          this.spotData.name = data.name;
          this.spotData.deviceNo = data.deviceNo;
          this.spotData.deviceName = data.deviceName;
          this.spotData.deviceType = data.deviceType;
          this.spotData.principleOne = data.principleOne;
          this.spotData.principleTwo = data.principleTwo;
          this.spotData.tourId = data.tourId;
          this.spotData.nos = data.nos;
          this.spotData.beginDate = data.beginDate;
          this.procedures = data.procedures;
          this.loading = false;
        } else {
          this.loading = false;
          this.$message.error(res.message);
        }
      });
    },
    // 获取责任人
    getPrincipleData() {
      getPrinciple().then((res) => {
        if (res.status === "20000") {
          this.principleData = res.data;
        }
      });
    },
    getPrincipleInfo(index) {
        if(index){
          if(this.spotData.principleTwo){
            this.principleData = this.principleData.filter( item => item.id !== this.spotData.principleTwo)
          } else {
            this.getPrincipleData()
          }
        } else {
          if(this.spotData.principleOne){
             this.principleData = this.principleData.filter( item => item.id !== this.spotData.principleOne)
          } else {
            this.getPrincipleData()
          }
        }
    },
    // 获取巡检人
    getTourData() {
      getTour().then((res) => {
        if (res.status === "20000") {
          this.tourData = res.data;
        }
      });
    },
    // 获取设备操作人
    getOperatorData() {
        getOperator().then(res=> {
          this.operatorData = res.data;
        })
    },
    // 提交
    submit(index) {
      this.loading = true;
      this.spotData.procedures = this.procedures;
      if (!index) {
        insertProofing(this.spotData).then((res) => {
          if (res.status === "20000") {
            this.loading = false;
            this.$message.success("提交成功");
            setTimeout(() => {
              this.$router.back();
            }, 500);
          } else {
            this.loading = false;
            this.$message.error(res.message);
          }
        });
      } else {
        this.spotData.id = this.versionId;
        updateProofing(this.spotData).then((res) => {
          if (res.status === "20000") {
            this.loading = false;
            this.$message.success("修改成功");
            setTimeout(() => {
              this.$router.back();
            }, 500);
          } else {
            this.loading = false;
            this.$message.error(res.message);
          }
        });
      }
    },
    addFlow() {
      this.procedures.push({
        flow: "",
        projectStandards: [{ longdyProject: "", standard: "", frequency: "" }],
      });
    },
    delFlow(index) {
      this.procedures.splice(index, 1);
    },
    addInfo(index) {
      this.procedures[index].projectStandards.push({
        flow: "",
        standard: "",
        frequency: "",
      });
    },
    removeInfo(index, indey) {
      this.procedures[index].projectStandards.splice(indey, 1);
    },
    // 新增检测人员
    addVerifyList() {
      this.verifyPeopleList.push({
        shiftId: "",
        shiftName: "",
        userId: "",
        userName: "",
      });
    },
    // 删除检测人员
    removeVerifyList() {
      this.verifyPeopleList.pop();
    },
    // 获取频率数据
    getFrequencys() {
      this.frequencys = this.frequencys.filter((item) => item.show === true);
    },
    // 选中值
    checkFrequency(e) {
      // this.frequencys.find((item) => item.id === e).show = false;
      console.log(e);
    },
    // 上传图片前
    beforeAvatarUpload(file) {
      const isLt2M = file.size / 1024 / 1024 < 10;
      if (!isLt2M) {
        this.$message.error("上传图片大小不能超过 10MB!");
        return false;
      } else {
        return true;
      }
    },
    // 执行上传
    successUpload(res) {
      this.planData.guideFile = res.data.id;
      this.planData.url = res.data.url;
      this.planData.fileName = res.data.originalName;
    },
    // 获取班次列表
    async getShiftList() {
      await shiftList().then((res) => {
        if (res.status === "20000") {
          this.shiftsList = res.data;
        }
      });
    },
    // 选中的班次
    getShift(val, index) {
      this.verifyPeopleList[index].shiftId = val;
      this.verifyPeopleList[index].shiftName = this.shiftsList.find(
        (item) => item.id === val
      ).name;
      this.verifyPeopleList[index].userId = "";
      this.verifyPeopleList[index].userName = "";
    },
    // 根据工位获取用户
    getUserList(index) {
      let shiftId = "";
      if (this.buttonStatus) {
        shiftId = this.verifyPeopleList[index].shiftId;
      } else {
        if (!index) {
          shiftId = this.shiftOneId;
        } else {
          shiftId = this.shiftTwoId;
        }
      }
      getInspector({ id: shiftId }).then((res) => {
        // 去除已选中的用户
        // if (index) {
        //   this.userList = res.data.filter(
        //     (item) => item.id !== this.verifyPeopleList[0].userId
        //   );
        // } else {
        this.userList = res.data;
        // }
      });
    },
    // 获取当前天的下一天
    getNextDay() {
      let date = getNowDay();
      let num = parseInt(date.charAt(date.length - 1)) + 1;
      let nextDay = date.slice(0, date.length - 1) + num;
      return nextDay;
    },
  },
};
</script>

<style scoped>
.top-main {
  padding: 20px 20px 0 20px;
  height: 100%;
}
.body-main {
  border: 20px solid #f0f2f5;
  padding: 20px;
}
.el-card {
  margin-bottom: 20px;
}
.info-full {
  margin-bottom: 30px;
  height: 80px;
}
.info-style {
  font-size: 18px;
  margin-bottom: 15px;
}
.jj-img {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
}
.el-form-item {
  margin: 0;
}
.jg-line {
  width: 100%;
  height: 2px;
  background: #eee;
  margin: 5px 0;
}
.xx-line {
  width: 100%;
  height: 50px;
  margin-top: 30px;
  border: 2px dashed#eee;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  cursor: pointer;
}
.user-search {
  margin-top: 20px;
}
.el-radio {
  margin-right: 5px;
}
/deep/ .el-radio__label {
  padding-left: 5px;
}
/deep/ .el-input--medium .el-input__inner {
  height: 42px;
}
</style>