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

<template>
  <div class="">
    <div>

      <el-form ref="ref_form1"
               :inline="false"
               class="form">

        <el-form-item label="处理方式"
                      label-width="150px"
                      :class="{'form-item':source==='visiual'}"
                      prop="operationType">
          <el-radio-group :class="{'form-item':source==='visiual'}"
                          v-model="operationType"
                          @change="handleChangeOperationType">

            <el-radio label="0">转项目</el-radio>
            <el-radio label="1">关闭</el-radio>

          </el-radio-group>
        </el-form-item>

      </el-form>

      <div v-if="operationType==='0'">
        <el-form ref="ref_project_form"
                 :inline="false"
                 :model="project"
                 :rules="projectDataRule">
          <el-form-item label="处理部门"
                        label-width="150px"
                        :class="{'form-item':source==='visiual'}"
                        prop="staffList">
            <el-popover placement="bottom"
                        width="400"
                        height="400"
                        v-model="visibleStaffPanel">
              <div class="f">
                <select-staff @confirm="(ret) => (project.staffList = ret)"
                              @close="visibleStaffPanel = false" />
              </div>

              <div slot="reference">
                   <el-button v-if="project.staffList.length == 0" type="text" > <i class="el-icon-thumb"></i> 点击选择</el-button>
                <a v-else
                   style="cursor: pointer">已选 {{ project.staffList.length }} 人</a>
              </div>
            </el-popover>
          </el-form-item>
          <el-form-item label="项目方案"
                        prop="publicReply"
                        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="project.publicReply"></el-input>
            </div>

          </el-form-item>
          <el-form-item label="内部备注"
                        prop="internalRemark"
                        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="project.internalRemark"></el-input>
            </div>

          </el-form-item>

        </el-form>
      </div>

      <div v-if="operationType==='1'">
        <el-form ref="ref_close_form"
                 :inline="false"
                 :model="closedInfo"
                 :rules="closeDataRule">
          <el-form-item label="处理结果"
                        label-width="150px"
                        :class="{'form-item':source==='visiual'}"
                        prop="resolveType">
            <el-radio-group :class="{'form-item':source==='visiual'}"
                            v-model="closedInfo.resolveType">

              <el-radio label="resolved">已解决</el-radio>
              <el-radio label="unresolved">无需解决</el-radio>

            </el-radio-group>
          </el-form-item>
          <el-form-item label="关闭原因"
                        prop="closeReason"
                        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="closedInfo.closeReason"></el-input>
            </div>

          </el-form-item>

        </el-form>

      </div>

    </div>

  </div>
</template>

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

import selectStaff from "@/views/components/selectStaff";

let loading; // 加载动画

export default {
  data () {
    return {

      casOptions: [],
      iscascaderShow: 0,
      selCategoryArray: [],
      selCateObj: {},
      optionProps: {
        multiple: false,
        value: 'id',
        label: 'name',
        children: 'subCategory',
      },

      operationType: '0',
      visibleStaffPanel: false,

      okflag: false,

      eventDetailCopy: {},

      closedInfo: {
        resolveType: 'resolved',
        closeReason: '',//关闭原因
      },

      project: {
        staffList: [],
        internalRemark: '',
        publicReply: '',
      }

    };
  },
  components: {
    selectStaff,

  },
  computed: {
    closeDataRule () {
      return {
        resolveType: [
          { required: true, message: "处理结果不能为空", trigger: "change" },
        ],
        closeReason: [
          { required: true, message: "关闭原因不能为空", trigger: "change" },
        ],

      };
    },
    projectDataRule () {
      return {
        staffList: [
          { required: true, message: "处理部门不能为空", trigger: "change" },
        ],

        publicReply: [
          { required: true, message: "项目方案不能为空", trigger: "change" },
        ],

      };
    },


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

  watch: {

  },

  created () {

    console.log(this.source)

  },

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

    if (this.eventId) {
      this.eventDetailCopy = JSON.parse(JSON.stringify(this.eventDetailData));

    }

  },

  methods: {
    handleChangeOperationType (val) {
      if (val === '0') {
        this.$refs['ref_project_form'].resetFields()
      } else {
        this.$refs['ref_close_form'].resetFields()
      }

    },
    async getProcessInfo () {
      this.okflag = false

      if (this.operationType === '0') {
        this.$refs["ref_project_form"].validate((valid, messageObj) => {
          if (!valid) {
            app.util.validateRule(messageObj);

          } else {
            this.okflag = true
          }
        });

      } else if (this.operationType === '1') {
        this.$refs["ref_close_form"].validate((valid, messageObj) => {
          if (!valid) {
            app.util.validateRule(messageObj);

          } else {
            this.okflag = true
          }
        });
      }

    },

    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" scoped>
@import "@/assets/scss/modules/shequzhili/event-info.scss";
.el-dialog__body {
  padding: 0 10px 16px !important;
}
</style>



<style>

</style>