kuangshan-project/src/views/meihuajing/yinhuanpaicha/yinhuanform_yzg_wys.vue

<template>
  <div>
    <!-- <div v-if="shows">
      <van-nav-bar title="风险评级" left-arrow @click-left="onClickLeft" />
    </div> -->
    <div class="headers">
      <div>
        <van-field
          v-model="value13"
          name="检查人"
          label="检查人"
          placeholder="检查人"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value10"
          name="检查人部门"
          label="检查人部门"
          placeholder="检查人部门"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value1"
          name="检查专业"
          label="检查专业"
          placeholder="检查专业"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value2"
          name="隐患等级"
          label="隐患等级"
          placeholder="隐患等级"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-cell-group>
          <van-field
            v-model="message1"
            rows="1"
            autosize
            label="存在问题或隐患"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message2"
            rows="1"
            autosize
            label="整改措施"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>
    </div>
    <div class="contents">
      <div>
        <van-field
          v-model="value3"
          name="风险点"
          label="风险点"
          placeholder="风险点"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value4"
          name="风险类型"
          label="风险类型"
          placeholder="风险类型"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value5"
          name="风险等级"
          label="风险等级"
          placeholder="风险等级"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value6"
          name="事故类型"
          label="事故类型"
          placeholder="事故类型"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-cell-group>
          <van-field
            v-model="message3"
            rows="1"
            autosize
            label="风险描述"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message4"
            rows="1"
            autosize
            label="后果及影响"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message5"
            rows="1"
            autosize
            label="管控措施"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>
      <!-- <div>
        <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="45"> </el-table-column>
          <el-table-column label="日期" width="90">
            <template slot-scope="scope">{{ scope.row.date }}</template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" width="120">
          </el-table-column>
          <el-table-column prop="address" label="地址" show-overflow-tooltip>
          </el-table-column>
        </el-table>
      </div> -->
    </div>
    <div class="contents1">
      <div>
        <van-cell-group>
          <van-field
            v-model="message6"
            rows="1"
            autosize
            label="整改责任单位"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
          <van-field
            v-model="message7"
            rows="1"
            autosize
            label="整改责任人"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>

      <div>
        <van-field
          v-model="value7"
          name="督办部门"
          label="督办部门"
          placeholder="督办部门"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value8"
          name="督办责任人"
          label="督办责任人"
          placeholder="督办责任人"
          :rules="[{ required: true, message: '请选择' }]"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value11"
          name="整改类型"
          label="整改类型"
          placeholder="整改类型"
          readonly="false"
        />
      </div>

      <div>
        <van-field
          v-model="value9"
          name="整改期限"
          label="整改期限"
          placeholder="整改期限"
          readonly="false"
        />
      </div>
    </div>
    <div class="contents2">
      <div>
        <van-cell-group>
          <van-field
            v-model="message8"
            rows="1"
            autosize
            label="整改意见"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>
    </div>
    <div class="contents3">
      <div>
        <van-cell-group>
          <van-field
            v-if="check_accept_department"
            v-model="check_accept_department"
            rows="1"
            autosize
            label="验收部门"
            type="textarea"
            placeholder="请输入信息"
            readonly="false"
          />
        </van-cell-group>
      </div>

      <div>
        <van-field
          v-if="!check_accept_department"
          readonly
          clickable
          label="验收部门"
          :value="value12"
          placeholder="请选择"
          @click="showPicker12 = true"
        />
        <van-popup v-model="showPicker12" round position="bottom">
          <van-picker
            show-toolbar
            :columns="columns12"
            @cancel="showPicker12 = false"
            @confirm="onConfirm12"
          />
        </van-popup>
      </div>

      <!-- <div>
        <van-field
          v-model="fieldValue_yanShouRen"
          is-link
          readonly
          label="验收责任人"
          placeholder="请选择验收责任人"
          @click="show_yanShouRen = true"
        />
        <van-popup v-model="show_yanShouRen" round position="bottom">
          <van-cascader
            v-model="cascaderValue_yanShouRen"
            title="请选择验收责任人"
            :options="options"
            @close="show_yanShouRen = false"
            @finish="onFinish_yanShouRen"
          />
        </van-popup>
      </div> -->
    </div>
    <div class="buttons" v-if="!check_accept_department">
      <button @click="tijiao">确认提交</button>
    </div>
  </div>
</template>

<script>
import { getAllUrlParams } from "../../../plugins/url-encapsulation.js";

export default {
  data() {
    return {
      shows: true,
      value1: "", //检查专业
      value2: "", //隐患等级
      message1: "", //存在问题或隐患
      message2: "", //整改措施
      value3: "", //风险点
      value4: "", //风险类型
      value5: "", //风险等级
      value6: "", //事故类型
      message3: "", //风险描述
      message4: "", //后果及影响
      message5: "", //管控措施
      message6: "", //整改责任单位
      message7: "", //整改责任人
      value7: "", //督办部门
      value8: "", //督办责任人
      value9: "", //整改期限
      message8: "", //整改意见
      message9: "", //验收意见
      message10: "", //验收日期
      message11: "", //验收部门
      message12: "", //验收责任人
      message13: "", //验收结果
      showPicker12: false,
      showPicker13: false,
      fileList: [],
      infos: [],
      dates: "请选择" ? "请选择" : "",
      showtime: false,

      // 检查人部门
      value10: "",
      // 整改类型
      value11: "",
      // 验收部门
      value12: "",
      // 检查人
      value13: "",

      // 验收部门选项
      columns12: [],

      // 详情id
      id: "",
      // 详情数据
      detail: {},

      // 验收部门
      sectionArr: [],
      sectionArr_id: "",
      // 验收责任人
      staffArr: [],
      staffArr_id: "",

      // 筛选整改人
      show_yanShouRen: false,

      fieldValue_yanShouRen: "",
      cascaderValue_yanShouRen: "",

      options: [],

      check_accept_department: "",
    };
  },
  methods: {
    //返回按钮
    onClickLeft() {
      window.history.back();
      // console.log("sss");
    },
    tijiao() {
      console.log(this.sectionArr_id, this.staffArr_id);

      if (this.sectionArr_id == "") {
        this.$toast("请填写完整后再提交!");

        return;
      }

      this.$toast.loading();

      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/troubleshoot/updateTroubleshoot",
          {
            id: this.id,
            check_accept_department: this.sectionArr_id,
            // check_accept_duty_person: this.staffArr_id,
            type: 4,
          }
        )
        .then((res) => {
          this.$toast.clear();

          console.log(res.data);

          window.history.back();
        });
    },
    afterRead(file) {
      console.log(file);
    },
    formatDate(date) {
      return `${date.getFullYear()}-${date.getMonth() + 1}-${date.getDate()}`;
    },

    onConfirm12(value, index) {
      console.log(value, index);

      this.sectionArr_id = this.sectionArr[index].id;

      this.value12 = value;
      this.showPicker12 = false;
    },

    onConfirm13(value, index) {
      console.log(value, index);

      this.staffArr_id = this.staffArr[index].id;

      this.value13 = value;
      this.showPicker13 = false;
    },

    // 获取部门 和 责任人数据
    getStaffAndSectionData() {
      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/troubleshoot/getStaffAndSectionData",
          {}
        )
        .then((res) => {
          console.log(res.data);

          this.sectionArr = res.data.data.sectionArr;
          this.staffArr = res.data.data.staffArr;

          // 验收部门
          this.columns12 = [];
          res.data.data.sectionArr.forEach((item, index) => {
            this.columns12.push(item.title);
          });
        });
    },

    // 获取详情
    getTroubleshootDetail(id) {
      this.$toast.loading();

      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/troubleshoot/getTroubleshootDetail",
          {
            id: id,
          }
        )
        .then((res) => {
          this.$toast.clear();

          console.log(res.data.data);

          this.detail = res.data.data;

          const data = res.data.data;

          this.value10 = data.inspected_unit;
          this.value1 = data.inspection_specialty;
          this.value2 = data.hidden_danger_level;
          this.message1 = data.hidden_danger;
          this.message2 = data.rectification_measures;
          this.value3 = data.risk_rating.risk_point;
          this.value4 = data.risk_rating.risk_type;
          this.value5 = data.risk_rating.risk_level;
          this.value6 = data.risk_rating.accident_type;
          this.message3 = data.risk_rating.risk_description;
          this.message4 = data.risk_rating.consequences_and_impact;
          this.message5 = data.risk_rating.control_measures;
          this.message6 = data.rectification_duty_unit;
          this.message7 = data.rectification_duty_person;
          this.value7 = data.supervision_department;
          this.value8 = data.supervision_duty_person;
          this.value11 = data.rectification_type;
          this.value9 = data.rectification_term;
          this.value13 = data.inspected_person;

          this.message8 = data.rectification_opinion;

          this.check_accept_department = data.check_accept_department;
        });
    },

    // 获取部门、人
    getSectionStaff() {
      this.$http
        .post(
          "http://meihuajing.nxjiewei.com:8011/api/section/getSectionStaff",
          {}
        )
        .then((res) => {
          console.log(res.data.data);
          this.options = res.data.data;
        });
    },

    // 选择验收责任人
    onFinish_yanShouRen({ selectedOptions }) {
      this.show_yanShouRen = false;
      this.fieldValue_yanShouRen = selectedOptions
        .map((option) => option.text)
        .join("--");

      console.log(selectedOptions[1].value);

      this.staffArr_id = selectedOptions[1].value;
    },
  },
  mounted() {
    document.body.style.backgroundColor = "#f0f0f0"; //背景色

    this.id = getAllUrlParams(window.location.href).id;
    this.getTroubleshootDetail(this.id);

    // 获取部门 和 责任人数据
    this.getStaffAndSectionData();
    this.getSectionStaff();
  },
};
</script>

<style scoped>
>>> .van-nav-bar {
  background: #39f;
}
>>> .van-nav-bar__title {
  color: #fff;
}
>>> .van-nav-bar .van-icon {
  color: #fff;
}
>>> .van-nav-bar__text {
  color: #fff;
}
[class*="van-hairline"]:after {
  border: none;
}
>>> .van-cell__title,
.van-cell__value {
  -webkit-box-flex: 1;
  -webkit-flex: none;
  flex: none;
}
>>> .van-cell__value > span {
  padding-left: 42px;
}
.headers {
  width: 100%;
  background: #fff;
}
.contents,
.contents1,
.contents2,
.contents3 {
  width: 100%;
  background: #fff;
  margin-top: 10px;
}
/* .buttons {
  width: 100%;
  text-align: center;
}
.buttons > .buttons_one {
  border: none;
  background: #4dc100;
  font-size: 14px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 20px;
  margin: 15px 20px;
}
.buttons > .buttons_two {
  border: none;
  background: #c00201;
  font-size: 14px;
  width: 100px;
  height: 40px;
  line-height: 40px;
  color: #fff;
  border-radius: 20px;
  margin: 15px 20px;
} */

.buttons {
  width: 110px;
  height: 40px;
  background: #39f;
  margin: 10px auto;
  text-align: center;
  line-height: 40px;
  border-radius: 20px;
}
.buttons > button {
  border: none;
  color: #fff;
  background: #39f;
}

.contents2_img {
  display: flex;
}
.contents2_img > p {
  font-size: 14px;
  margin-left: 16px;
  color: #646566;
}
.contents2_img > div {
  margin-left: 40px;
}
</style>