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

<template>
  <div class="">
    <div class="g-process-info">

      <el-form ref="ref_form1"
               :inline="false"
               :rules="dataRule"
               class="form">
        <el-form-item label="分类"
                      label-width="150px"
                      prop="categoryList">
          <el-cascader class="cell-width-2"
                       ref="myCascader"
                       :disabled="operationType==='2'"
                       v-model="selCategoryArray"
                       :key="iscascaderShow"
                       :options="casOptions"
                       :props="optionProps"
                       :show-all-levels="false"
                       @change="handleChangeCate"></el-cascader>
        </el-form-item>
        <el-form-item label="处理方式"
                      label-width="150px"
                      prop="operationType">
          <el-radio-group v-model="operationType">
            <el-radio label="0">回复</el-radio>
            <el-radio label="1">立项</el-radio>
            <el-radio label="2">转需求</el-radio>
          </el-radio-group>
        </el-form-item>

      </el-form>

      <div v-if="operationType==='0'">
        <process-form-replay ref="ref_process_form_replay"
                             :eventDetailData="eventDetailData"></process-form-replay>
      </div>

      <div v-if="operationType==='1'">
        <process-form-project ref="ref_process_form_project"
                              :eventDetailData="eventDetailData"></process-form-project>
      </div>

      <div v-if="operationType==='2'">
        <process-form-demand ref="ref_process_form_demond"
                             :eventId="eventId"
                             :demandUserId="demandUserId"
                             :demandUserName="demandUserName"
                             :demandUserMobile="demandUserMobile"
                             :eventDetailData="eventDetailData"></process-form-demand>

      </div>

    </div>

  </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
import processFormReplay from "./process-form-replay";
import processFormProject from "./process-form-project";
import processFormDemand from "./process-form-demand";


let loading; // 加载动画

export default {
  data () {
    return {


      casOptions: [],
      iscascaderShow: 0,
      selCategoryArray: [

      ],
      selCateObj: {},
      optionProps: {
        multiple: false,
        value: 'id',
        label: 'name',
        children: 'subCategory',

      },

      operationType: '0',

      categoryList: [],
      replayInfo: {},
      demand: {},
      project: {},
      okflag: false,

      eventDetailCopy: {}

    };
  },
  components: {
    processFormReplay,
    processFormProject,
    processFormDemand
  },
  computed: {
    dataRule () {
      return {
        categoryList: [
          { required: true, message: "分类不能为空", trigger: "blur" },
        ],
        operationType: [
          { required: true, message: "处理方式不能为空", trigger: "blur" },
        ],

      };
    },


  },
  props: {
    demandUserId: {
      type: String,
      default: "",
    },
    demandUserName: {
      type: String,
      default: "",
    },
    demandUserMobile: {
      type: String,
      default: "",
    },
    eventId: {
      type: String,
      default: "",
    },
    eventDetailData: {
      type: Object,
      default () {
        return {}
      }
    },
  },

  watch: {

  },

  async mounted () {
    const { user } = this.$store.state
    this.agencyId = user.agencyId
    await this.getCategoryList()
    if (this.eventId) {
      this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData));
      if (this.eventDetailCopy.parentCategoryId && this.eventDetailCopy.categoryId) {
        this.selCategoryArray = []
        this.selCategoryArray.push(this.eventDetailCopy.parentCategoryId)
        this.selCategoryArray.push(this.eventDetailCopy.categoryId)

        this.selCateObj = {
          name: this.eventDetailCopy.categoryName,
          id: this.eventDetailCopy.categoryId
        }
      }
    }



  },

  methods: {


    async getCategoryList () {
      const url = "/gov/issue/issueprojectcategorydict/list"

      let params = {}

      const { data, code, msg } = await requestPost(url, params)

      if (code === 0) {

        let treeDataNew = this.filterTree(data)

        //组织级联数据
        ++this.iscascaderShow
        this.casOptions = []


        this.casOptions = treeDataNew

      } else {
        this.$message.error(msg)
      }

    },

    handleChangeCate () {
      console.log(this.$refs["myCascader"].getCheckedNodes()[0].data)
      this.selCateObj = this.$refs["myCascader"].getCheckedNodes()[0].data

    },

    //重构树，去除网格
    filterTree (arr) {
      let childs = arr
      for (let i = childs.length; i--; i > 0) {
        if (childs[i].subCategory) {
          if (childs[i].subCategory.length) {
            this.filterTree(childs[i].subCategory)
          } else {
            delete childs[i].subCategory
          }
        }
      }
      return arr
    },

    async getProcessInfo () {

      this.okflag = false

      if (this.selCategoryArray.length === 0) {
        this.$message({
          type: "error",
          message: "请选择分类",
        });

        this.okflag = false
        return false
      }
      this.categoryList = []

      this.categoryList.push(this.selCategoryArray[1])


      if (this.operationType === '0') {
        this.$refs.ref_process_form_replay.getReplayInfo()
        if (this.$refs.ref_process_form_replay.okflag) {

          this.replayInfo = this.$refs.ref_process_form_replay.formData

          this.replayInfo.categoryId = this.categoryList[0]
          this.replayInfo.categoryList = this.categoryList

          this.okflag = true

        } else {
          return false
        }


      } else if (this.operationType === '1') {
        this.$refs.ref_process_form_project.getProjectInfo()
        if (this.$refs.ref_process_form_project.okflag) {

          this.project = this.$refs.ref_process_form_project.formData

          this.project.categoryList = []
          this.project.categoryList.push(this.selCateObj)


          //赋值分类信息
          this.okflag = true

        } else {
          return false
        }
      } else if (this.operationType === '2') {
        this.$refs.ref_process_form_demond.getDemandInfo()
        if (this.$refs.ref_process_form_demond.okflag) {
          this.demand = this.$refs.ref_process_form_demond.formData

          this.okflag = true

        } else {
          return false
        }
      }

    },


    handleCancle () {
      this.resetData();

    },
    resetData () {

    },
    // 开启加载动画
    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/event-info.scss"
  scoped
></style>





<style>
.el-dialog__body {
  padding: 0 10px 20px !important;
}
</style>