epmet-work-pc/src/views/modules/shequzhili/event/cpts/process-form-complete.vue

<template>
  <div class="">
    <el-form ref="ref_form" :inline="false" :model="formData" :rules="dataRule" label-width="118px">
      <el-form-item label="办理情况" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="publicReply">
        <div :class="{ 'visiual-form': source === 'visiual' }">
          <el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入办理情况"
            v-model.trim="formData.publicReply">
          </el-input>
        </div>
      </el-form-item>

      <el-form-item label="上传录音" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="luyin">
        <el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
          :data="{ customerId: customerId }" :show-file-list="true" :on-success="handleAudioSuccess"
          :on-remove="handleAudioRemove" :before-upload="beforeAudioUpload">
          <i v-if="source === 'manage'" :class="['el-icon-plus']"></i>
          <img v-else style="width: 27px; height: 27px" src="@/assets/img/file-add.png" />
        </el-upload>
      </el-form-item>
      <el-form-item label="上传图片" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="internalFile">
        <el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
          :data="{ customerId: customerId }" :show-file-list="true" :on-success="handleImgSuccess"
          :on-remove="handleImgRemove" :before-upload="beforeImgUpload">
          <i v-if="source === 'manage'" :class="['el-icon-plus']"></i>
          <img v-else style="width: 27px; height: 27px" src="@/assets/img/file-add.png" />
        </el-upload>
      </el-form-item>
      <el-divider></el-divider>
      <div class="flex">
        <div class="item">
          <el-form-item label="答复人" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入答复人" v-model.trim="formData.title">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="答复电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入答复电话" v-model.trim="formData.title">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="联系人" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入联系人" v-model.trim="formData.title">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="联系电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入联系电话" v-model.trim="formData.title">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label-width="118px" label="填报不合规诉求">
            <el-select v-model.trim="formData.localResidenceFlag" clearable class="item_width_4">
              <el-option v-for="item in binaryOptionList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item" v-if="formData.localResidenceFlag === 1">
          <el-form-item label-width="118px" label="不合规诉求类型">
            <el-select v-model.trim="formData.localResidenceFlag" clearable class="item_width_4">
              <el-option v-for="item in nonComplianceType" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="办理真实度" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="zhenshidu">
            <el-select v-model.trim="formData.zhenshidu" clearable class="item_width_4">
              <el-option v-for="item in selectList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="flex">
        <div class="item">
          <el-form-item label="回访人" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="huifangren">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="请输入回访人"
                v-model.trim="formData.huifangren">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="回访时间" prop="huifangshijian" label-width="118px"
            :class="{ 'form-item': source === 'visiual' }" style="display: block">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-date-picker v-model.trim="formData.huifangshijian" class="cell-width-1" type="datetime"
                placeholder="请选择回访时间" value-format="yyyy-MM-dd HH:mm:ss">
              </el-date-picker>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="当事人联系不上" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="danshiren">
            <el-select v-model.trim="formData.danshiren" clearable class="item_width_4">
              <el-option v-for="item in contactList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="未接通电话" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="weijietong">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-select v-model.trim="formData.weijietong" clearable class="item_width_4">
                <el-option v-for="item in contactFailureList" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="是否配合回访" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="peihe">
            <el-select v-model.trim="formData.peihe" clearable class="item_width_4">
              <el-option v-for="item in coordinateList" :key="item.value" :label="item.label" :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="服务过程满意度" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="manyidu">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-select v-model.trim="formData.manyidu" clearable class="item_width_4">
                <el-option v-for="item in satisfactionType" :key="item.value" :label="item.label" :value="item.value"
                  @click.native="handelChangeSatisfaction(item.value)">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="不满意原因" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="bumanyi">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-select v-model.trim="formData.bumanyi" clearable class="item_width_4">
                <el-option v-for="item in noSatisfactionType" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
          </el-form-item>
        </div>

        <div class="item">
          <el-form-item label="回访意见" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="huifangyijian">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入回访意见"
                v-model.trim="formData.huifangyijian">
              </el-input>
            </div>
          </el-form-item>
        </div>
      </div>
      <el-divider></el-divider>
      <div :class="['process-title', { 'process-title-vis': source === 'visiual' },]" v-if="pageType === 'check'">
        <img src="../../../../../assets/images/index/title-icon-chuli.png" width="30px" height="30px" alt="">
        审核
      </div>
      <div class="flex">
        <div class="item">
          <el-form-item label="审核结果" label-width="118px" :class="{ 'form-item': source === 'visiual' }" prop="">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="input" class="item_width_4" :rows="2" placeholder="答复人" v-model.trim="formData.title">
              </el-input>
            </div>
          </el-form-item>
        </div>
        <div class="item">
          <el-form-item label="上传图片" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="internalFile">
            <el-upload :headers="$getElUploadHeaders()" class="avatar-uploader" :action="uploadUlr"
              :data="{ customerId: customerId }" :show-file-list="true" :on-success="handleImgSuccess"
              :on-remove="handleImgRemove" :before-upload="beforeImgUpload">
              <i v-if="source === 'manage'" :class="['el-icon-plus']"></i>
              <img v-else style="width: 27px; height: 27px" src="@/assets/img/file-add.png" />
            </el-upload>
          </el-form-item>
        </div>
        <div :span="24">
          <el-form-item label="审核结果说明" label-width="118px" :class="{ 'form-item': source === 'visiual' }"
            prop="internalRemark">
            <div :class="{ 'visiual-form': source === 'visiual' }">
              <el-input type="textarea" class="cell-width-area" :rows="2" placeholder="请输入审核结果说明"
                v-model.trim="formData.internalRemark">
              </el-input>
            </div>
          </el-form-item>
        </div>
      </div>
    </el-form>
  </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
import { binaryOptionList, nonComplianceType, satisfactionType, noSatisfactionType } from "@/js/columns/constants";
let loading; // 加载动画
function iniFmData() {
  return {
    operationType: "11", //处理方式[11已办结,10办理中,9联系当事人]
    gridId: "", //
    huifangren: "",
    assistanceUnitType: "", //	 协办单位类型，1社区自组织，2联建单位
    zhenshidu: '', // 	勾选人员信息
    internalFile: [],
    luyin: [],
    title: "",
    huifangshijian: "",
    eventId: "",
    danshiren: '',
    huifangyijian: '',
    peihe: '',
    manyidu: '',
    bumanyi: ''
  };
}
export default {
  data() {
    return {
      binaryOptionList,
      nonComplianceType,
      satisfactionType,
      noSatisfactionType,
      customerId: localStorage.getItem("customerId"),
      assistanceUnitList: [], //协办单位数组
      formData: iniFmData(),
      okflag: false,
      uploadUlr: window.SITE_CONFIG["apiURL"] + "/oss/file/uploadqrcodeV2",
      eventDetailCopy: {},
      selectList: [{ label: '属实', value: 1 }, { label: '不属实', value: 0 }],
      contactList: [{ label: '已联系', value: 1 }, { label: '未联系', value: 0 }],
      contactFailureList: [{ label: '已接通', value: 1 }, { label: '未接通', value: 0 }],
      coordinateList: [{ label: '配合', value: 1 }, { label: '未配合', value: 0 }],
      dataRule: {
        publicReply: [
          { required: true, message: "办理情况不能为空", trigger: "blur" },
        ],
        zhenshidu: [
          { required: true, message: "办理真实度不能为空", trigger: "blur" },
        ],
        huifangren: [
          { required: true, message: "回访人不能为空", trigger: "blur" },
        ],
        huifangshijian: [
          { required: true, message: "回访时间不能为空", trigger: "blur" },
        ],
        danshiren: [
          { required: true, message: "请选择当事人联系不上", trigger: "blur" },
        ],
        weijietong: [
          { required: true, message: "请选择未接通电话", trigger: "blur" },
        ],
        huifangyijian: [
          { required: true, message: "回访意见不能为空", trigger: "blur" },
        ],
        peihe: [
          { required: true, message: "请选择是否配合回访", trigger: "blur" },
        ],
        manyidu: [
          { required: true, message: "请选择服务过程满意度", trigger: "blur" },
        ],
      }
    };
  },
  components: {},
  computed: {
  },
  props: {
    eventId: {
      type: String,
      default: "",
    },
    eventDetailData: {
      type: Object,
      default() {
        return {};
      },
    },
    pageType: {
      type: String,
      default: "",
    },
    source: {
      //展示来源：manage  管理平台    visiual  可视化平台
      type: String,
      default: "manage",
    },
  },
  watch: {},
  created() { },

  mounted() {
    const { user } = this.$store.state;
    this.agencyId = user.agencyId;
  },

  methods: {
    handelChangeSatisfaction(val) {
      console.log(val);
      if (val === 0) {
        this.$set(this.dataRule, 'bumanyi', [{ required: true, message: "请选择不满意原因", trigger: "blur" }]);
      } else {
        this.$delete(this.dataRule, 'bumanyi');
      }
    },
    handleTagChange(val) {
      console.log(val);
    },
    async getProjectInfo() {
      this.okflag = false;
      this.$refs["ref_form"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);
        } else {
          this.okflag = true;
        }
      });
    },
    beforeAudioUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 10;
      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isLt1M;
    },
    handleAudioSuccess(res, file, fileList) {
      console.log("res.data.url", file);
      if (res.code === 0 && res.msg === "success") {
        console.log("res.data.url", res.data.url);
        this.formData.yinpin.push({
          format: file.name.split(".").pop(),
          name: file.name,
          size: file.size,
          type: file.raw.type,
          url: res.data.url,
        });
        console.log(this.formData.internalFile);
      } else {
        this.$message.error(res.msg);
      }
    },

    handleAudioRemove(file) {
      let index = this.formData.yinpin.findIndex(
        (item) => item.url == file.response.data.url
      );
      this.formData.internalFile.splice(index, 1);
      console.log(this.formData.internalFile);
    },
    beforeImgUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 10;

      if (!isLt1M) {
        this.$message.error("上传文件大小不能超过 10MB!");
      }
      return isLt1M;
    },
    handleImgSuccess(res, file, fileList) {
      console.log("res.data.url", file);
      if (res.code === 0 && res.msg === "success") {
        console.log("res.data.url", res.data.url);
        this.formData.internalFile.push({
          format: file.name.split(".").pop(),
          name: file.name,
          size: file.size,
          type: file.raw.type,
          url: res.data.url,
        });
        console.log(this.formData.internalFile);
      } else {
        this.$message.error(res.msg);
      }
    },

    handleImgRemove(file) {
      let index = this.formData.internalFile.findIndex(
        (item) => item.url == file.response.data.url
      );
      this.formData.internalFile.splice(index, 1);
      console.log(this.formData.internalFile);
    },
    async getReplayInfo() {
      this.okflag = false;
      this.$refs["ref_form"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);
        } else {
          this.okflag = true;
        }
      });
    },
    // 开启加载动画
    startLoading() {
      loading = Loading.service({
        lock: true, // 是否锁定
        text: "正在加载……", // 加载中需要显示的文字
        background: "rgba(0,0,0,.7)", // 背景颜色
      });
    },
    // 结束加载动画
    endLoading() {
      // clearTimeout(timer);
      if (loading) {
        loading.close();
      }
    },
  },
};
</script>

<style lang="scss" src="@/assets/scss/modules/shequzhili/project-info.scss" scoped></style>

<style lang='scss' scoped>
@import "@/assets/scss/modules/visual/a_customize.scss";
@import "@/assets/scss/modules/shequzhili/event-info.scss";
</style>
<style scoped>
.el-dialog__body {
  padding: 0 10px 20px !important;
}
</style>