zuel-itsm-3.0.2/src/views/processing.vue

<template>
  <div class="againAssign">
    <div class="conentBox">
      <div class="header">处理方案</div>
      <div v-if="modelData.incident.id" class="conent">
        <div class="navBar">
          <div class="fl" :class="{'p50':modelData.incident.handlerUser.id!=loginUser.id}">
            <a :class="{active:actives=='info'}" href="javascript:;" @click="toInfo('info')">事件信息</a>
          </div>
          <div class="fl" :class="{'p50':modelData.incident.handlerUser.id!=loginUser.id}">
            <a
              :class="{active:actives=='progress'}"
              href="javascript:;"
              @click="toInfo('progress')"
            >处理进度</a>
          </div>

          <div class="fl" v-if="modelData.incident.handlerUser.id==loginUser.id">
            <a
              :class="{active:actives=='handlerInfo'}"
              href="javascript:;"
              @click="toInfo('handlerInfo')"
            >处理信息</a>
          </div>
        </div>
        <div class="label headtop" id="info">事件信息</div>

        <div class="info">
          <div class="head">
            <p>
              <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
              事件编号：{{modelData.incident.incidentsign}}
              <span class="fr btn chulizhong">{{modelData.incident.state.name}}</span>
            </p>
          </div>
          <p>
            <span class="fl">事件分类</span>
            <span class="fr">{{modelData.incident.category.category}}</span>
          </p>
          <!-- <p>
            <span class="fl">事件主题</span>
            <span class="fr">{{modelData.incident.title}}</span>
          </p> -->
          <p class="desc">
            <span class="fl">事件描述</span>
            <span class="grayFont fr" v-html="modelData.incident.description"></span>
          </p>
          <div class="shows" id="shows">
              <p v-if="valConfig==2">
                <span class="fl">报修科室</span>
                <span class="fr">{{modelData.incident.department?modelData.incident.department.dept:''}}</span>
              </p>
            <p v-if="valConfig==1">
              <span class="fl">报修人</span>
              <span class="fr">{{modelData.incident.requester.name}}</span>
            </p>
            <p v-if="valConfig==2">
              <span class="fl">联系人</span>
              <span class="fr">{{modelData.incident.contacts}}</span>
            </p>
            <p>
              <span class="fl">联系电话</span>
              <span class="fr" v-if="!modelData.incident.contactsInformation"></span>
              <span class="fr" v-if="modelData.incident.contactsInformation"><a :href="'tel:' + modelData.incident.contactsInformation">{{modelData.incident.contactsInformation}}</a></span>
            </p>
            <p>
              <span class="fl">联系地址</span>
              <span class="fr">{{modelData.incident.houseNumber||''}}</span>
            </p>
            <p class="boeder_B">
              <span class="fl">事件来源</span>
              <span class="fr">{{modelData.incident.source.name}}</span>
            </p>
            <!-- <p>
              <span class="fl">影响度</span>
              <span class="fr">{{modelData.incident.influence?modelData.incident.influence.name:''}}</span>
            </p>
            <p>
              <span class="fl">紧急度</span>
              <span class="fr">{{modelData.incident.emergency?modelData.incident.emergency.name:''}}</span>
            </p> -->
            <p>
              <span class="fl">优先级</span>
              <span class="fr">{{modelData.incident.priority?modelData.incident.priority.name:''}}</span>
            </p>
            <p>
              <span class="fl">逾期响应时间</span>
              <span class="fr">{{modelData.incident.overdueResponseDate}}</span>
            </p>
            <p>
              <span class="fl">逾期解决时间</span>
              <span class="fr">{{modelData.incident.overdueTime}}</span>
            </p>
            <p>
                <span class="fl">区域</span>
                <span class="fr">{{modelData.incident.place?modelData.incident.place.area.area:'--'}}</span>
              </p>
              <p>
                <span class="fl">地点</span>
                <span class="fr">{{modelData.incident.place?modelData.incident.place.place:'--'}}</span>
              </p>

              <!-- <p v-if="modelData.incident.synergeticReason">
                <span class="fl" >协同原因</span>
                <span class="fr">{{modelData.incident.synergeticReason}}</span>
              </p>
              <p v-if="modelData.isupreason">
                <span class="fl">升级原因</span>
                <span class="fr">{{modelData.isupreason}}</span>
              </p>
              <p v-if="modelData.transferReason">
                <span class="fl">转派原因</span>
                <span class="fr" >{{modelData.transferReason}}</span>
              </p> -->
          </div>
          <p class="info_hide">
            <span class="fl hide" @click="hides()" v-if="!item_hides">展开详情 >></span>
            <span class="fl hide" @click="hides()" v-if="item_hides">隐藏详情<<</span>
          </p>
          <div class="imgs-container" v-if="imgs.length">
            <div class="imgs-cont">
              <img v-if='img.suffix=="jpeg"||img.suffix=="jpg"||img.suffix=="gif"||img.suffix=="png"||img.suffix=="svg"||img.suffix=="pdf"' :src="img.previewUrl" v-for="(img, index) in imgs" class="imgs">
              <p v-else>
                <a :href='[img.previewUrl]'>{{img.name}}</a>
              </p>
            </div>
          </div>

          <div class="label" id="progress">处理进度</div>
          <div  :class="{'progress':true,'progressHide':!pro_hides}" id="progressBox">
            <div class="progress_info" v-for="item in progressInfo">
              <div class="progress_info_L">{{item.activityName}}</div>
              <div class="progress_info_R">
                <div class="time">
                  <i
                    :class="{'iconfont':true, 'icon-icon_weizuo':item.endTime!='','icon-icon_zhengzaijinx':item.endTime=='' }"
                  ></i>
                  <span class="text1">{{item.startTime}}</span>
                </div>
                <div :class="{'cont':true,'blue':item.endTime!='' }">
                  <p class="text2" v-if="item.desc">{{item.desc}}</p>
                </div>
              </div>
            </div>
          </div>

          <p class="info_hide">
            <span class="fl hide" @click="proHides()">{{pro_hides?'隐藏详情 <<':'展开详情 >>'}}</span>
          </p>
          <div v-if="modelData.incident.handlerUser.id==loginUser.id">
            <div class="label" id="handlerInfo">处理信息</div>
            <div class="handlerInfo">
              <cube-form :model="model" @validate="validateHandler" @submit="submitHandler">
                <cube-form-group>
                  <!-- <cube-form-item :field="fields[12]" class="btn_plcaeholde"> -->
                    <!-- <cube-button @click="showDatePicker">{{model.dateValue || 'Please select date'}}</cube-button> -->
                    <!-- <date-picker ref="datePicker" :min="[2008, 8, 8]" :max="[2020, 10, 20]" @select="dateSelectHandler"></date-picker> -->
                  <!-- </cube-form-item> -->
                  <!-- <cube-form-item :field="fields[13]" class="btn_plcaeholde"></cube-form-item> -->
                  <div class="handleRadio">
                    <cube-radio-group
                      v-model="order"
                      :options="handleTypes"
                      position="right"
                      :hollow-style="true"
                    />
                  </div>

                  <cube-form-item :field="fields[0]" v-if="order==1"></cube-form-item>
                  <cube-form-item :field="fields[1]" class="btn_plcaeholde" v-if="order==1">
                    <cube-button
                      @click="showCategoryPicker()"
                    >{{selectedCategoryTxt?selectedCategoryTxt:'请选择事件分类'}}</cube-button>
                  </cube-form-item>
                  <cube-form-item :field="fields[2]" v-if="order==1"></cube-form-item>
                  <cube-form-item :field="fields[3]" class="incidentTitle" v-if="order==1">
                    <div class="titleRefer">
                      <textarea
                        class="titleTxtArea fl"
                        placeholder="请输入处理方案"
                        v-model="incidentTitle"
                        @input="inpTitle()"
                      ></textarea>
                      <span class="abtn fl" @click="referKnowledge()">引入知识库</span>
                    </div>
                  </cube-form-item>
                  <div class="label formLabel" v-if="order==1">
                    报修图片
                    <span>(最多可上传3张JPG或PNG,每张不能超过10M)</span>
                  </div>
                  <div class="uplod" v-if="order==1">
                    <cube-upload
                      ref="upload"
                      :max="3"
                      :action="action"
                      :simultaneous-uploads="3"
                      @files-added="filesAdded"
                      @file-submitted="fileSubmitted"
                    />
                  </div>
                  <cube-form-item :field="fields[4]" v-if="order==1"></cube-form-item>
                  <cube-form-item
                    :field="fields[5]"
                    class="btn_plcaeholde"
                    v-if="order==1&&!!model.knowledge"
                  ></cube-form-item>
                  <cube-form-item :field="fields[10]" v-if="order==1">
                    <div class="synerBox">
                      <cube-checkbox-group v-model="synergeticChecked" :options="synergeticList"/>
                    </div>
                  </cube-form-item>
                  <cube-form-item :field="fields[11]" v-if="order==1"></cube-form-item>
                  <cube-form-item :field="fields[6]" v-if="order==2"></cube-form-item>
                  <cube-form-item :field="fields[7]" v-if="order==2"></cube-form-item>
                  <cube-form-item :field="fields[8]" v-if="order==3"></cube-form-item>
                  <cube-form-item :field="fields[9]" v-if="order==3"></cube-form-item>

                </cube-form-group>
                <cube-form-group class="sub">
                  <cube-button type="submit" @click="subVali()">提交</cube-button>
                </cube-form-group>
              </cube-form>
            </div>
          </div>
        </div>
      </div>
      <load-ing v-if="!modelData.incident.id"></load-ing>
      <promp-ting :conents="promptingConent" :status="promptingStatus"></promp-ting>
    </div>
  </div>
</template>
<script>
import CubePage from "./../components/cube-page.vue";
import CubeButtonGroup from "./../components/cube-button-group.vue";
import DatePicker from "./../components/date-picker.vue";
import CubeExtendPopup from "./../components/extend-popup.vue";
import LoadIng from "./../views/loading.vue";
import PrompTing from "./../views/prompting.vue";
// import host from '../request/host'

// 知识库类型
const solution = {
  props: {
    value: {
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      selected: [],
      selectData: [],
      initVal: JSON.parse(localStorage.getItem("solution")) || [0, 0, 0]
    };
  },
  render(createElement) {
    return createElement(
      "cube-button",
      {
        on: {
          click: this.showPicker
        }
      },
      this.selected.length
        ? this.selected[this.selected.length - 1]
        : "请选择知识库类型"
    );
  },
  created() {
    this.getTree();
  },
  mounted() {},
  methods: {
    showPicker() {
      this.picker.show();
    },
    selectHandler(selectedVal, selectedIndex, selectedTxt) {
      var selected = [];
      selectedTxt.forEach(function(v, i) {
        if (v != "") {
          selected.push(v);
        }
      });
      this.selected = selected;
      this.$emit("input", selectedVal);
      localStorage.setItem("solution", JSON.stringify(selectedIndex));
    },
    // 获取事件分类数据
    getTree() {
      let that = this;
      that.$http
        .post("service/solution/fetchDataList/solutionType", {
          idx: 0,
          sum: 100
        })
        .then(function(res) {
          // console.log(res);
          var list = res.data.list;
          var tree = [];
          list.forEach((v, i) => {
            if (!v.parent) {
              tree[i] = {
                value: v.id,
                text: v.typeName,
                children: []
              };
            } else {
              tree.forEach((val, idx) => {
                if (
                  v.parent &&
                  !v.parent.parent &&
                  val.text == v.parent.typeName
                ) {
                  tree[idx].children.push({
                    value: v.id,
                    text: v.typeName,
                    children: []
                  });
                } else if (v.parent.parent) {
                  tree[idx].children.forEach((value, index) => {
                    if (value.text == v.parent.typeName) {
                      tree[idx].children[index].children.push({
                        value: v.id,
                        text: v.typeName
                      });
                    }
                  });
                }
              });
            }
          });

          that.selectData = tree;
          that.picker = that.$createCascadePicker({
            title: "知识库类型选择",
            data: that.selectData,
            selectedIndex: that.initVal,
            onSelect: that.selectHandler
          });
        });
    }
  }
};
export default {
  data() {
    return {
      loginUser: JSON.parse(localStorage.getItem("loginUser")),
      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
      id:'',
      resignComment: "", //重新指派原因
      item_hides: false,
      actives: "info",
      processInstanceId: "",
      progressInfo: [], //处理进度
      imgs: [], //图片
      model: {}, //提交数据
      validity: {},
      valid: undefined,
      action: {
        target: this.$host+"/service/common/common/uploadAttachment/incident/",
        data: {}
      },
      isUploading: false,
      loadShow: false,
      pro_hides:false,//展开/收起处理进度
      name: "",
      phone: "",
      label: "incidentInfo", //顶部快速定位
      modelData: {
        incident: {}
      }, //上传的model
      incidentTitle: "", //处理方案
      referenceInfo: {}, //引用信息
      selectedCategoryTxt: "", //事件分类选中展示
      selectedAreaId: "", //区域选中id--seimin
      selectedAreaName: "", //区域选中名称--seimin
      selectedPlaceId: "", //地点选中id--seimin
      selectedPlaceName: "", //地点选中名称--seimin
      model: {
        handleCategory: "", //处理方式
        closecode: "", //关闭代码
        category: [], //确认事件分类
        handleDescription: "", //处理方案
        knowledge: false, //是否提交知识库
        solutionType: [], //知识库类型
        handlerUser: "", //升级/转派对象
        isupreason: "", //升级原因
        transferReason: "", //转派原因
        synergeticChecked: [], //选中协同对象
        synergeticReason: "", //协同原因
        selectArea:'',
        selectPlace:'',
      },
      // showPrompting:false,
      promptingConent: "",
      promptingStatus: "",
      order: 1, //处理方式  1：直接处理，2:升级，3:转派，4:协同
      handleCategoryArr: [], //处理方式数组
      closecodeArr: [], //关闭代码数组
      // handlerUserArr: [], //处理人数组
      synergeticList: [], //协同对象列表
      synergeticChecked: [], //选中协同对象
      handleTypes: [
        {
          label: "直接处理",
          value: 1
        },
        {
          label: "升级",
          value: 2
        },
        {
          label: "转派",
          value: 3
        }
        // {
        //   label: "协同",
        //   value: 4
        // }
      ],
      vali: false,
      fields: [
        {
          type: "select",
          modelKey: "handleCategory",
          label: "处理方式:",
          props: {
            options: this.handleCategoryArr,
            title: "请选择处理方式",
            placeholder: "请选择处理方式"
          },
          rules: {
            required: true
          }
        },
        {
          component: "button",
          modelKey: "category",
          label: "确认事件分类:",
          rules: {
            required: true
          }
        },
        {
          type: "select",
          modelKey: "closecode",
          label: "关闭代码:",
          props: {
            options: this.closecodeArr,
            title: "请选择关闭代码",
            placeholder: "请选择关闭代码"
          },
          rules: {
            required: true
          }
        },
        {
          type: "textarea",
          modelKey: "handleDescription",
          label: "处理方案:",
          props: {
            placeholder: "请填写处理方案"
          },
          rules: {
            required: true
          },
          debounce: 100
        },
        {
          type: "switch",
          modelKey: "knowledge",
          label: "是否提交知识库:",
          rules: {
            required: false
          }
        },
        {
          component: solution,
          modelKey: "solutionType",
          label: "知识库类型:",
          rules: {
            required: true
          },
          messages: {
            required: ""
          }
        },
        {
          type: "select",
          modelKey: "handlerUser",
          label: "升级对象:",
          props: {
            options: [],
            placeholder: "请选择升级对象"
          },
          rules: {
            required: true
          }
        },
        {
          type: "input",
          modelKey: "isupreason",
          label: "升级原因:",
          props: {
            placeholder: "请输入升级原因"
          },
          rules: {
            required: true
          }
        },
        {
          type: "select",
          modelKey: "handlerUser",
          label: "转派对象:",
          props: {
            options: [],
            placeholder: "请选择转派对象"
          },
          rules: {
            required: true
          }
        },
        {
          type: "input",
          modelKey: "transferReason",
          label: "转派原因:",
          props: {
            placeholder: "请输入转派原因"
          },
          rules: {
            required: true
          }
        },
        {
          type: "checkbox-group",
          modelKey: "synergeticChecked",
          label: "协同对象:",
          props: {
            options: [],
            placeholder: "请选择协同对象"
          },
          rules: {
            required: false
          }
        },
        {
          type: "input",
          modelKey: "synergeticReason",
          label: "协同原因:",
          props: {
            placeholder: "请输入协同原因"
          },
          rules: {
            required: false
          }
        },
        {
          type: "select",
          modelKey: "selectArea",
          label: "区域:",
          props: {
            options: [],
            title: "请选择区域:",
            placeholder: "请选择区域:"
          },
          events:{
            change:(id,index,text)=>{
              // console.log(id,index,text,9999)
              this.getPlaceList(id)
              .then(res=>{
                this.selectedAreaId = id;
                this.selectedAreaName = text;
                // {{modelData.incident.place?modelData.incident.place.area.area:'--'}}
                console.log(this.modelData,'asad')
                if(this.modelData.incident.place){
                  this.$set(this.modelData.incident.place,'area',{
                    id,
                    area:text
                  })
                }else{
                  this.$set(this.modelData.incident,'place',{
                    area:{
                      id,
                      area:text
                    }
                  })
                }
              })
            }
          },
          rules: {
            required: true
          }
        },
        {
          type: "select",
          modelKey: "selectPlace",
          label: "地点:",
          props: {
            options: [],
            title: "请选择地点:",
            placeholder: "请选择地点:"
          },
          events:{
            change:(id,index,text)=>{
              this.selectedPlaceId = id;
              this.selectedPlaceName = text;
              this.$set(this.modelData.incident,'houseNumber',this.selectedAreaName+this.selectedPlaceName);
              if(this.modelData.incident.place){
                this.$set(this.modelData.incident.place,'place',text);
                this.$set(this.modelData.incident.place,'id',id);
              }else{
                this.$set(this.modelData.incident,'place',{
                  id,
                  place:text
                })
              }
            }
          },
          rules: {
            required: true
          }
        },
      ]
    };
  },
  watch: {
    // 监听synergeticChecked变化
    synergeticChecked: {
      handler: function(n, o) {
        this.model.synergeticChecked = n;
      }
    }
  },
  components: {
    LoadIng
  },
  methods: {
    //获取区域
    getAreaList(){
      return new Promise((resolve,reject)=>{
        this.$http.post('service/user/data/fetchDataList/area',{"idx":0,"sum":1000})
      .then(res=>{
        if(res.data.status == 200){
          let arr = res.data.list.map(item=>{
            return {value:item.id,text:item.area};
          });
          // console.log(arr,2222)
          // this.selectedAreaArr = arr;
          this.fields.forEach(item=>{
            if(item.modelKey === 'selectArea'){
              item.props.options = arr;
            }
          })
          resolve(res);
        }
      })
      })
    },
    //根据区域获取地点
    getPlaceList(id){
      return new Promise((resolve,reject)=>{
        this.$http.post('service/user/data/fetchDataList/place',{"idx":0,"sum":1000,"place":{"area":{id}}})
        .then(res=>{
          if(res.data.status == 200){
            let arr = res.data.list.map(item=>{
              return {value:item.id,text:item.place};
            });
            // console.log(arr,2222)
            // this.selectedAreaArr = arr;
            this.fields.forEach(item=>{
              if(item.modelKey === 'selectPlace'){
                item.props.options = arr;
              }
            })
            resolve(res);
          }
        })
      })
    },
    //   获取事件数据
    getParamsData() {
      var that = this;
      that.$http
        .get(
          "/service/form/renderForm/handlerform/" +
            that.processInstanceId +
            "/" +
            that.loginUser.id+'/'+that.id,
          {}
        )
        .then(function(res) {
          console.log(res.data,666);
          that.modelData = res.data.model;
          //seimin
          localStorage.setItem('modelData',JSON.stringify(that.modelData))
        });
    },
    // 获取图片
    getImgs() {
      var that = this;
      that.$http
        .get(
          "service/common/common/listAttachment/incident/" +
            that.processInstanceId,
          {}
        )
        .then(function(res) {
          that.imgs = res.data.data.splice(0, 3);
        });
    },
    // 事件分类回显
    setCategory(){
      let that=this;
      console.log(898)
      console.log(that.modelData.incident.category);
      let cate=that.modelData.incident.category;
    },
    // 获取处理进度
    getProgressInfo() {
      var that = this;
      that.$http
        .post(
          "/service/bpm/bpm/flowTracingCustom/" + that.processInstanceId,
          {}
        )
        .then(function(res) {
          console.log(res.data);
          that.progressInfo = res.data.data;
          that.progressInfo.reverse();
        });
    },
    //隐藏显示详情
    hides() {
      this.item_hides = !this.item_hides;
      $("#shows").slideToggle();
    },
    // 处理进度隐藏/展开
    proHides(){
      if(!this.pro_hides){
        $('#progressBox').animate({'height':$('#progressBox')[0].scrollHeight})
      }else{
        $('#progressBox').animate({'height':'1.7rem'})
      }
      this.pro_hides=!this.pro_hides;
    },
    // 快速定位
    toInfo(id) {
      this.actives = id;
      $("body,html").animate(
        {
          scrollTop:
            $("#" + id).offset().top -
            $(".header")[0].offsetHeight -
            $(".navBar")[0].offsetHeight
        },
        260
      );
    },
    // 输入处理方案
    inpTitle() {
      this.model.handleDescription = this.incidentTitle;
    },

    subVali() {
      this.vali = true;
    },
    // 获取处理方式
    getHandleCategory() {
      var that = this;
      this.$http
        .post("service/common/common/getDictionary", {
          key: "incident_handleCategory",
          type: "list"
        })
        .then(function(res) {
          res.data.forEach(function(v, i) {
            that.handleCategoryArr.push({
              text: v.name,
              value: v.id
            });
          });
          that.fields[0].props.options = that.handleCategoryArr;
        });
    },
    // 获取关闭代码
    getClosecode() {
      var that = this;
      this.$http
        .post("service/common/common/getDictionary", {
          key: "incident_closecode",
          type: "list"
        })
        .then(function(res) {
          res.data.forEach(function(v, i) {
            that.closecodeArr.push({
              text: v.desc,
              value: v.id
            });
          });
          that.fields[2].props.options = that.closecodeArr;
        });
    },
    // 获取升级对象
    getUpUser() {
      var that = this;
      var postData = {
        idx: 0,
        sum: 1000,
        user: {
          roledata: { rolecode: "second-line support" },
          selectType: "1"
        }
      };
      this.$http
        .post("service/user/data/fetchDataList/user", postData)
        .then(function(res) {
          var handlerUserArr = [];
          res.data.list.forEach(function(v, i) {
            handlerUserArr.push({
              text: v.name,
              value: v.id
            });
          });
          that.fields[6].props.options = handlerUserArr;
        });
    },
    // 获取转派对象
    getRotateUser() {
      var that = this;
      var postData = {
        idx: 0,
        sum: 1000,
        user: {
          roledata: { rolecode: "first-line support" },
          selectType: "1"
        }
      };
      this.$http
        .post("service/user/data/fetchDataList/user", postData)
        .then(function(res) {
          var handlerUserArr = [];
          res.data.list.forEach(function(v, i) {
            handlerUserArr.push({
              text: v.name,
              value: v.id
            });
          });
          that.fields[8].props.options = handlerUserArr;
        });
    },
    // 获取协同对象
    getSynerUser() {
      var that = this;
      var postData = {
        idx: 0,
        sum: 1000
      };
      this.$http
        .post("service/user/data/fetchDataList/user", postData)
        .then(function(res) {
          var handlerUserArr = [];
          res.data.list.forEach(function(v, i) {
            handlerUserArr.push({
              label: v.name,
              value: v.id
            });
          });
          that.fields[10].props.options = handlerUserArr;
          that.synergeticList = handlerUserArr;
        });
    },
    // 获取页面数据
    getMessage() {
      var that = this;
      if (localStorage.getItem("model")) {
        that.model = JSON.parse(localStorage.getItem("model"));
      }
      if (localStorage.getItem("modelData")) {
        that.modelData = JSON.parse(localStorage.getItem("modelData"));
      }
      if (localStorage.getItem("referenceInfo")) {
        that.referenceInfo = JSON.parse(localStorage.getItem("referenceInfo"));
        that.incidentTitle = that.model.handleDescription =
          that.referenceInfo.content;
      }
      if (localStorage.getItem("order")) {
        that.order = localStorage.getItem("order") - 0;
      }
      if (localStorage.getItem("selectedCategoryTxt")) {
        that.selectedCategoryTxt = JSON.parse(localStorage.getItem("selectedCategoryTxt"));
      }


    },
    // 事件分类
    showCategoryPicker() {
      this.categoryPicker.show();
    },
    selectCategoryHandler(selectedVal, selectedIndex, selectedTxt) {
      console.log(selectedVal, selectedIndex, selectedTxt);
      var selected = [];
      selectedTxt.forEach(function(v, i) {
        if (v != "") {
          selected.push(v);
        }
      });
      this.selected = selected;
      this.selectedCategoryTxt=selected[selected.length - 1];
      this.model.category=selectedVal;
      localStorage.setItem("category", JSON.stringify(selectedIndex));
      localStorage.setItem("categoryVal", JSON.stringify(selectedVal));
      localStorage.setItem("selectedCategoryTxt", JSON.stringify(this.selectedCategoryTxt));
    },
    getIncidentcategory() {
      var that = this;
      this.$http
        .post("service/bpm/data/fetchDataList/incidentcategory", {
          idx: 0,
          sum: 1000
        })
        .then(function(res) {
          var list = res.data.list;
          var tree = [];
          list.forEach((v, i) => {
            if (!v.parent) {
              tree[i] = {
                value: v.id,
                text: v.category,
                children: []
              };
            } else {
              tree.forEach((val, idx) => {
                if (
                  v.parent &&
                  !v.parent.parent &&
                  val.text == v.parent.category
                ) {
                  tree[idx].children.push({
                    value: v.id,
                    text: v.category,
                    children: []
                  });
                } else if (v.parent.parent) {
                  tree[idx].children.forEach((value, index) => {
                    if (value.text == v.parent.category) {
                      tree[idx].children[index].children.push({
                        value: v.id,
                        text: v.category
                      });
                    }
                  });
                }
              });
            }
          });

          // 获取事件分类并设置
          // that.setCategory()

          if(!localStorage.getItem("category")){
            let cate=that.modelData.incident.category;
            let cateGrand=cate.parentCategory&&cate.parentCategory.parentCategory&&cate.parentCategory.parentCategory.id;
            let cateFa=cate.parentCategory&&cate.parentCategory.id;
            let cateSelf=cate.id;
            console.log(cate,tree)
            var i1=0,i2=0,i3=0;
            var selectedVal=[];
            var selectedIndex=[];
            var selectedTxt=[];
            tree.forEach((v,i)=>{
              if(v.value==cateGrand){
                selectedVal.push(v.value);
                selectedIndex.push(i);
                selectedTxt.push(v.text);
                v.children.forEach((va,ind)=>{
                  if(va.value==cateFa){
                    selectedVal.push(va.value);
                    selectedIndex.push(ind);
                    selectedTxt.push(va.text);
                    va.children.forEach((val,idx)=>{
                      if(val.value==cateSelf){
                        selectedVal.push(val.value);
                      selectedIndex.push(idx);
                      selectedTxt.push(val.text);
                      }
                    })
                  }
                })
              }
            })

            console.log(selectedVal, selectedIndex, selectedTxt);
            // console.log(i1,i2,i3);
            // var cateData=[i1,i2,i3]


            that.selectData = tree;
            that.categoryPicker = that.$createCascadePicker({
              title: "事件分类选择",
              data: that.selectData,
              selectedIndex: selectedIndex,
              onSelect: that.selectCategoryHandler
            });

            setTimeout(() => {
              that.selectCategoryHandler(selectedVal, selectedIndex, selectedTxt)
            }, 500);
          }else{
            that.selectData = tree;
            that.categoryPicker = that.$createCascadePicker({
              title: "事件分类选择",
              data: that.selectData,
              selectedIndex: JSON.parse(localStorage.getItem("category")) || [0, 0, 0],
              onSelect: that.selectCategoryHandler
            });
            that.model.category=JSON.parse(localStorage.getItem("categoryVal"))
          }


        });
    },
    // 暂时存值
    setLocalStroageData() {
      var that = this;
      var a1 = [],
        a2 = [],
        a3 = [],
        category = [],
        solutionType = [],
        synergeticChecked = [];
      that.model.category.forEach(function(v, i) {
        if (v) {
          a1.push(v);
        }
      });
      category = a1;
      that.model.solutionType.forEach(function(v, i) {
        if (v) {
          a2.push(v);
        }
      });
      solutionType = a2;

      that.synergeticChecked.forEach(function(v, i) {
        a3.push({ id: v });
      });
      synergeticChecked = a3;

      that.modelData.incident.category = {
        id: category[category.length - 1]
      };
      that.modelData.loginUser=that.loginUser;
      if (that.order == 1) {
        // 直接处理
        that.modelData.handler_code = "resolve";
        that.modelData.incident.handleDescription =
          that.model.handleDescription;
        that.modelData.incident.handleCategory = {
          id: that.model.handleCategory
        };
        that.modelData.incident.closecode = { id: that.model.closecode };
        that.modelData.isSolution=that.model.knowledge;
        that.modelData.bpm_activiti = {
          solutionType: {
            id: solutionType[solutionType.length - 1]
          }
        };
        // 协同
        that.modelData.incident.synergeticReason = that.model.synergeticReason;
        delete that.modelData.isupreason;
        delete that.modelData.examine;
        delete that.modelData.assignee;
        delete that.modelData.transferReason;
        that.modelData.incident.synergetic = synergeticChecked;
      } else if (that.order == 2) {
        // 升级
        that.modelData.handler_code = "function";
        that.modelData.isupreason = that.model.isupreason;
        that.modelData.assignee = that.model.handlerUser;
        that.modelData.examine={upgradeAuditor:{id:that.modelData.assignee}};
        delete that.modelData.transferReason;
        delete that.modelData.incident.synergetic;
        delete that.modelData.incident.synergeticReason;
        if(that.modelData.isSolution){
          delete that.modelData.isSolution
        }
      } else if (that.order == 3) {
        // 转派
        that.modelData.handler_code = "forward";
        that.modelData.transferReason = that.model.transferReason;
        that.modelData.assignee = that.model.handlerUser;
        delete that.modelData.isupreason;
        delete that.modelData.examine;
        delete that.modelData.incident.synergetic;
        delete that.modelData.incident.synergeticReason;
        if(that.modelData.isSolution){
          delete that.modelData.isSolution
        }
      }
      that.model.fileUrl = "url";
      that.loadShow = true;
    },
    // 处理方案引入知识库
    referKnowledge() {
      var that = this;
      if (!that.model.handleDescription){
        alert('请输入处理方案');
        return;
      };
      that.setLocalStroageData();
      localStorage.setItem("modelData", JSON.stringify(that.modelData));
      localStorage.setItem("model", JSON.stringify(that.model));
      localStorage.setItem("order", that.order);
      this.$router.push({
        name: "ReferenceList",
        params: { data: that.model.handleDescription }
      });
    },

    // 提交
    submitHandler() {
      var that = this;

      that.setLocalStroageData();
      // that.modelData.incident.place = {
      //   area:{
      //     id:this.selectedAreaId,
      //     area:this.selectedAreaName
      //   },
      //   id:this.selectedPlaceId,
      //   place:this.selectedPlaceName
      // };//增加区域地点
      // console.log(that.modelData,11111);
      // console.log(this.selectedPlaceId,this.selectedAreaId,8888);//2020年4月25日16:12:55
      that.model.fileUrl = "url";
      that.loadShow = true;
      that.$http
        .post(
          "service/bpm/bpm/completeTask/" +
            that.modelData.incident.taskId +
            "/" +
            that.loginUser.id,
          that.modelData
        )
        .then(function(res) {
          if (res.data) {
            setTimeout(function() {
              that.$refs.upload.start();
            }, 100);
            $("#fade").fadeIn();
            that.promptingConent = "恭喜您,提交成功!";
            that.promptingStatus = true;
            that.dialog = that
              .$createDialog({
                type: "alert",
                title: "提交成功",
                content: "点击返回首页",
                icon: "cubeic-right",
                onConfirm: (e, promptValue) => {
                  that.$router.push({ path: "/main" });
                }
              })
              .show();
            localStorage.removeItem("category");
            localStorage.removeItem("model");
            localStorage.removeItem("modelData");
            localStorage.removeItem("referenceInfo");
            localStorage.removeItem("solution");
            localStorage.removeItem("order");
            setTimeout(function() {
              $("#fade").fadeOut();
            }, 2000);
          } else {
            $("#fade").fadeIn();
            that.promptingConent = "系统错误,请稍后再试!";
            that.promptingStatus = false;
            that.loadShow = false;
            that.dialog = that
              .$createDialog({
                type: "alert",
                title: "系统错误,请稍后再试!",
                content: "点击返回首页",
                icon: "cubeic-wrong",
                onConfirm: (e, promptValue) => {
                  that.$router.push({ path: "/main" });
                }
              })
              .show();
            setTimeout(function() {
              $("#fade").fadeOut();
            }, 2000);
          }
        });
      event.preventDefault();
    },
    validateHandler(result) {
      // console.log(result);
      this.validity = result.validity;
      this.valid = result.valid;
      // if (this.vali == true) {
      //   $("#fade").fadeIn();
      //   this.promptingConent = "提交失败,请填写必填信息!";
      //   this.promptingStatus = false;
      //   setTimeout(function() {
      //     $("#fade").fadeOut();
      //   }, 2000);
      // }
      // this.vali = false;
    },

    dateSelectHandler(selectedVal) {
      this.model.dateValue = new Date(
        selectedVal[0],
        selectedVal[1] - 1,
        selectedVal[2]
      ).toDateString();
    },
    filesAdded(files) {
      let hasIgnore = false;
      const maxSize = 1000 * 1024 * 1024; // 1M
      for (let k in files) {
        const file = files[k];
        if (file.size > maxSize) {
          file.ignore = true;
          hasIgnore = true;
        }
      }
      hasIgnore &&
        this.$createToast({
          type: "warn",
          time: 1000,
          txt: "不能上传超过100M的文件"
        }).show();
      // 暂停上传
      this.$refs.upload.pause();
    },
    fileSubmitted(files) {
      this.action.data = { fileName: files.name };
    }
  },
  created() {
    this.processInstanceId = this.$route.params.data
      ? this.$route.params.data.processInstanceId
      : JSON.parse(localStorage.getItem("modelData")).incident
          .processInstanceId;
          this.id=this.$route.params.data?this.$route.params.data.id:JSON.parse(localStorage.getItem("modelData")).incident.id;

    this.action.target += this.processInstanceId;
    this.getParamsData();
    this.getProgressInfo();
    this.getImgs();
    // 处理方式
    this.getHandleCategory();
    // 关闭代码
    this.getClosecode();
    // 升级对象
    this.getUpUser();
    // 转派对象
    this.getRotateUser();
    // 协同对象
    this.getSynerUser();
    // 获取页面数据
    this.getMessage();
    // 事件分类
    this.getIncidentcategory();
  },
  mounted() {
    console.log(this.modelData,this.model,999);
    // 获取区域列表
      // this.getAreaList().then(res=>{
      //   if(this.modelData.incident.place){
      //     // 获取地点列表
      //     this.getPlaceList(this.modelData.incident.place.area.id)
      //     .then(res1=>{
      //       this.selectedAreaId = this.modelData.incident.place.area.id;
      //       this.selectedAreaName = this.modelData.incident.place.area.area;
      //       this.model.selectArea = this.modelData.incident.place.area.id;
      //       this.selectedPlaceId = this.modelData.incident.place.id;
      //       this.selectedPlaceName = this.modelData.incident.place.place;
      //       this.model.selectPlace = this.modelData.incident.place.id;
      //     });
      //   }
      // })
  },
  components: {
    CubePage,
    CubeButtonGroup,
    DatePicker,
    // JsonView
    CubeExtendPopup,
    LoadIng,
    PrompTing
  }
};
</script>

<style >
.newIncident .cube-form-group {
  border-bottom: 0.02rem solid rgb(245, 245, 245);
}
.newIncident .sub .cube-btn {
  margin-top: 1.1rem;
}
.btn_plcaeholde .cube-btn {
  padding-left: 0;
  padding-right: 0;
  text-align: left;
  color: inherit;
  background: none;
  border: none;
}
.btn_plcaeholde .cube-btn:active {
  background-color: #fff;
}
.btn_plcaeholde .cube-btn::after {
  content: ">";
  float: right;
  margin-right: 0.15rem;
}
.cube-form_standard .cube-upload-def .cube-upload-btn,
.cube-form_standard .cube-upload-def .cube-upload-file {
  margin-left: 3% !important;
}
.sub .cube-btn {
  background-color: #005395 !important;
  width: 90%;
  margin: 0 auto;
  border-radius: 8px;
}
.cube-picker-wheel-item {
  text-overflow: ellipsis;
}
</style>
<style lang="less" scoped>
.header {
  width: 100%;
  height: 0.88rem;
  line-height: 0.88rem;
  text-align: center;
  color: #fff;
  font-size: 0.37rem;
  background: linear-gradient(#2e2f32, #414246);
  position: fixed;
  top: 0;
  z-index: 6;
}
.incidentTitle {
  .titleRefer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .titleTxtArea {
      font-size: 0.3rem;
      color: #333;
      height: auto;
      width: 62%;
      &:focus {
        outline: none;
      }
    }
    .abtn {
      display: inline-block;
      width: 37%;
      text-align: center;
      height: 0.48rem;
      color: #005395;
      font-size: 0.28rem;
    }
  }
}
.form-custom {
  .cube-form-item {
    .cube-btn {
      padding-left: 0;
      padding-right: 0;
      text-align: left;
      color: inherit;
      background: none;
      border: none;
    }
  }
}

.label {
  background-color: rgb(238, 238, 238);
  height: 0.6rem;
  line-height: 0.6rem;
  padding-left: 0.2rem;
  font-size: 0.24rem;
  color: #666666;
  span {
    font-size: 0.2rem;
    display: inline-block;
    margin-left: 0.08rem;
    color: #999999;
  }
  &.formLabel {
    background-color: #fff;
  }
}

.zhidu {
  display: flex;
  height: 0.7rem;
  line-height: 0.7rem;
  border-bottom: 0.02rem solid rgb(245, 245, 245);
  div:nth-child(1) {
    width: 27.5%;
    padding-left: 6%;
  }
}

.bgColor {
  background-color: white;
  &.newIncident {
    padding-top: 1.84rem;
  }
}

.uplod {
  padding: 0 0.24rem;
  border-bottom: 0.02rem solid rgb(245, 245, 245);
}
.handleRadio {
  border-bottom: 0.02rem solid rgb(245, 245, 245);
}
.synerBox {
  height: 3rem;
  overflow: scroll;
}

i.iconfont.blue {
  color: #005395;
  // &::after {
  //   content: "";
  //   width: 0.01rem;
  //   height: 0.4rem;
  //   background: #005395;
  //   position: relative;
  //   display: block;
  //   left: 0.14rem;
  // }
}
.againAssign {
  .header {
    width: 100%;
    height: 0.88rem;
    line-height: 0.88rem;
    text-align: center;
    color: #fff;
    font-size: 0.37rem;
    background: linear-gradient(#2e2f32, #414246);
    position: fixed;
    top: 0;
    z-index: 6;
  }
  .navBar {
    width: 100%;
    height: 0.96rem;
    line-height: 0.96rem;
    background-color: #fafafa;
    font-size: 0.28rem;
    position: fixed;
    top: 0.88rem;
    z-index: 9;
    div {
      width: 33.33%;
      text-align: center;
      &.p50{
        width: 49.99%;
      }
      a {
        display: inline-block;
        height: 0.9rem;
        width: 1.7rem;
        padding: 0 0.1rem;
        &.active {
          color: #005395;
          border-bottom: 0.06rem solid #005395;
        }
      }
    }
  }

  .headtop {
    margin-top: 1.84rem;
  }
  .label {
    background-color: #eeeeee;
    height: 0.6rem;
    line-height: 0.58rem;
    padding-left: 0.2rem;
    font-size: 0.24rem;
    color: #666666;
    span {
      font-size: 0.2rem;
      display: inline-block;
      margin-left: 0.08rem;
      color: #999999;
    }
    &.formLabel {
      background-color: #fff;
    }
  }
  .conentBox {
    width: 100%;
    .conent {
      font-size: 0.32rem;
      font-weight: 400;
      line-height: 0.45rem;
      // border-bottom: 0.16rem solid #e5e5e5;

      .shows {
        display: none;
      }
      .boeder_B {
        border-bottom: 0.01rem solid #ccc;
      }
       p {
        &.desc{
          overflow: hidden;
        }
        .grayFont {
          width: 75%;
          text-align: right;
          overflow-x: scroll;
        }
       }
      .bottom {
        overflow: hidden;
        line-height: 0.86rem;
        border-bottom: 0.01rem solid #e6e6e6;
        font-size: 0.24rem;
        color: #999;
        padding: 0 0.24rem 0 0.48rem;
      }
      .info {
        color: #999;
        font-size: 0.28rem;
        overflow: hidden;
        .head {
          border-bottom: 0.01rem solid #e6e6e6;
          p {
            padding: 0.24rem 0.3rem;
            i {
              color: #00559d;
            }
          }
        }
        p {
          line-height: 0.4rem;
          padding: 0.1rem 0.24rem;
          overflow: hidden;
          .overflowEllipsis2 {
            margin-left: 1.96rem;
          }
        }
        .info_hide {
          padding: 0.2rem 0.24rem;
          border-bottom: 0.01rem solid #e6e6e6;
          .hide {
            color: #00559d;
          }
        }
        .imgs-container{
          a{
            color:#03c !important;
            &:visited{
              color: #551a8b !important;
            }
          }
           img {
            width: 1.5rem;
            height: 1.5rem;
            margin-right: 0.7rem;
            &:nth-child(1) {
              margin-left: 0.75rem;
            }
          }
        }
        .progress {
          padding: 0.2rem 0.2rem;
          overflow: hidden;
          transition-duration: .2s;
          transition-timing-function: linear;
          &.progressHide{
            height: 1.7rem;
          }
          .progress_info {
            overflow: hidden;
            margin-bottom: 0.1rem;
            &:nth-last-child(1) {
              .cont {
                border: none !important;
              }
            }
            .progress_info_L {
              float: left;
              color: #333;
              max-width: 18%;
            }
            .progress_info_R {
              float: right;
              margin-left: 0.09rem;
              width: 80%;
              font-size: 0.25rem;
              .time {
                i {
                  margin-left: -0.15rem;
                  &.icon-icon_weizuo {
                    color: #005495;
                  }
                  &.icon-icon_zhengzaijinx {
                    color: #48a843;
                    font-size: 0.37rem;
                  }
                }
                span {
                  margin-left: 0.15rem;
                }
              }
              .cont {
                border-left: 1px solid #999;
                padding-left: 0.4rem;
                min-height: 0.4rem;
                &.blue {
                  border-left: 1px solid #005395;
                }
              }

              .text1 {
                font-size: 0.15rem;
              }
              .text2 {
                color: #666;
              }
              p {
                padding: 0;
              }
            }
          }
        }
      }
      .txtLabel {
        width: 100%;
        overflow: hidden;
        padding: 0.32rem 0.24rem 0.32rem 0.32rem;
        .txt {
          width: 30%;
          color: #666;
        }
        .cube-textarea-wrapper {
          width: 62%;
        }
      }
      .sub {
        background: #ececec;
        .cube-btn {
          background-color: #005395 !important;
          width: 90%;
          margin: 0.2rem auto;
          border-radius: 8px;
        }
      }
    }
  }
  .showwrap {
    width: 75%;
    text-align: right;
  }
}
</style>