epmet-oper-gov-lingshan/src/views/modules/shequzhili/event/cpts/process-form-replay.vue

<template>
  <div class="search">

    <el-form ref="ref_form1"
             :inline="false"
             :model="formData"
             :rules="dataRule">
      <!-- <el-form-item label="事件分类"
                    label-width="150px"
                    :class="{'form-item':source==='visiual'}"
                    prop="categoryList">
        <div :class="{'visiual-form':source==='visiual'}">
          <el-cascader class="cell-width-2"
                       ref="myCascader"
                       v-model="selCategoryArray"
                       :key="iscascaderShow"
                       :options="casOptions"
                       :props="optionProps"
                       :show-all-levels="false"
                       @change="handleChangeCate"></el-cascader>
        </div>
      </el-form-item> -->
      <!-- 已阅收 处理中 已办结 已结案-->
      
      <el-form-item label="办理状态"
                    prop="manageStatus"
                    label-width="150px"
                    :class="{'form-item':source==='visiual'}"
                    style="display: block">
        <div :class="{'visiual-form':source==='visiual'}">
              <el-select v-model="formData.manageStatus" placeholder="请选择办理状态">
                <el-option
                  v-for="item in statusOption"
                  :label="item.label"
                  :value="item.value"
                  clearable
                  :key="item.value">
                </el-option>
              </el-select>
        </div>

      </el-form-item>
      <el-form-item
						label="办理时间"
						prop="manageTime"
						label-width="150px"
						style="display: block"
					>
						<el-date-picker
							v-model="formData.manageTime"
							class="cell-width-1"
							type="datetime"
							placeholder="办理时间"
							value-format="yyyy-MM-dd HH:mm:ss"
						>
						</el-date-picker>
					</el-form-item>
          <el-form-item label="办理人"
                    prop="manageResi"
                    label-width="150px"
                    :class="{'form-item':source==='visiual'}"
                    style="display: block">
        <div :class="{'visiual-form':source==='visiual'}">
          <el-input class="cell-width-area"
                    placeholder="请输入办理人"
                    v-model="formData.manageResi"></el-input>
        </div>

      </el-form-item>
      <el-form-item label="办理人电话"
                    prop="manageResiTel"
                    label-width="150px"
                    :class="{'form-item':source==='visiual'}"
                    style="display: block">
        <div :class="{'visiual-form':source==='visiual'}">
          <el-input class="cell-width-area"
                    placeholder="请输入办理人"
                    v-model="formData.manageResiTel"></el-input>
        </div>

      </el-form-item>
      <el-form-item label="办理意见"
                    prop="content"
                    label-width="150px"
                    :class="{'form-item':source==='visiual'}"
                    style="display: block">
        <div :class="{'visiual-form':source==='visiual'}">
          <el-input class="cell-width-area"
                    type="textarea"
                    maxlength="500"
                    show-word-limit
                    :rows="5"
                    placeholder="请输入回复内容，不超过500字"
                    v-model="formData.content"></el-input>
        </div>

      </el-form-item>
      <el-form-item label=""
                    label-width="150px"
                    :class="{'form-item':source==='visiual'}"
                    style="display: block">
        <el-checkbox :class="{'form-item':source==='visiual'}"
                     v-model="status">已完成</el-checkbox>
      </el-form-item>

    </el-form>

  </div>
</template>

<script>
import { Loading } from "element-ui"; // 引入Loading服务
import { requestPost } from "@/js/dai/request";
import formVltHelper from "dai-js/tools/formVltHelper";

import { isCard } from "@/utils/validate";

let loading; // 加载动画


export default {
  data () {
    return {
      btnDisable: false,
      formData: {
        operationType: '0',//处理方式[0:已回复 1:已转项目  2:已转需求]	
        content: '',
        manageStatus: '',
        manageTime:'',
        manageResi:'',
        manageResiTel:''
      },

      status: false,
      okflag: false,

      eventDetailCopy: {},
      statusOption:[
        {label:'已阅收',value:0},
        {label:'处理中',value:1},
        {label:'已办结',value:2},
        {label:'已结案',value:3}
      ],
      casOptions: [],
      iscascaderShow: 0,
      selCategoryArray: [],
      selCateObj: {},
      optionProps: {
        multiple: false,
        value: 'id',
        label: 'name',
        children: 'subCategory',
      },

    };
  },
  components: {},
  computed: {
    dataRule () {

      return {
        content: [
          { required: true, message: "办理意见不能为空", trigger: "blur" },
        ],
        manageStatus: [
          { required: true, message: "办理状态能为空", trigger: "blur" },
        ],
        manageTime: [
          { required: true, message: "办理时间不能为空", trigger: "blur" },
        ],
        manageResi: [
          { required: true, message: "办理人不能为空", trigger: "blur" },
        ],
        manageResiTel: [
          { required: true, message: "办理人电话不能为空", trigger: "blur" },
        ],
      };
    },


  },
  props: {
    eventId: {
      type: String,
      default: "",
    },
    eventDetailData: {
      type: Object,
      default () {
        return {}
      }
    },
    source: {//展示来源：manage  管理平台    visiual  可视化平台
      type: String,
      default: 'manage'
    }
  },
  watch: {},

  created () {

    console.log(this.source)

  },

  async mounted () {

    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 getReplayInfo () {
      this.okflag = false
      this.$refs["ref_form1"].validate((valid, messageObj) => {
        if (!valid) {
          app.util.validateRule(messageObj);

        } else {

          if (this.status) {

            if (!this.selCateObj || !this.selCateObj.id) {
              this.$message.info("请填写事件分类");
              return false
            }
            this.formData.status = 'closed_case'
          } else {
            this.formData.status = 'processing'
          }
          this.formData.categoryId = this.selCateObj.id
          this.formData.categoryList = []
          this.formData.categoryList.push(this.selCateObj)

          this.okflag = true
        }
      });
    },

    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' scoped>
@import "@/assets/scss/modules/visual/a_customize.scss";
@import "@/assets/scss/modules/shequzhili/event-info.scss";
</style>



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