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" v-html="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;
      if (localStorage.getItem("referenceInfo")) {
        that.referenceInfo = JSON.parse(localStorage.getItem("referenceInfo"));
        // that.incidentTitle = that.model.handleDescription =
        // that.referenceInfo.content;
        //baba
        var selectedVal = []; //存id,对应value
        var selectedIndex = []; //存索引
        var selectedTxt = []; //存名称
        if (this.referenceInfo.category) {
          console.log(this.selectData, "所有事件分类");
          console.log(this.referenceInfo.category, "返回的数据");
          var category = this.referenceInfo.category;
          selectedVal = [category.id]; //存id,对应value
          // selectedVal
          if (category.parentCategory) {
            //上级
            selectedVal.unshift(category.parentCategory.id);
            if (category.parentCategory.parentCategory) {
              //上上级
              selectedVal.unshift(category.parentCategory.parentCategory.id);
            }
          }
          // selectedIndex selectedTxt
          //一级
          if (selectedVal[0]) {
            this.selectData.forEach(function(v, i) {
              if (v.value == selectedVal[0]) {
                selectedIndex.push(i);
                selectedTxt.push(v.text);
              }
            });
            // 二级
            if (selectedVal[1]) {
              this.selectData[selectedIndex[0].toString()].children.forEach(
                function(v, i) {
                  if (v.value == selectedVal[1]) {
                    selectedIndex.push(i);
                    selectedTxt.push(v.text);
                  }
                }
              );
              // 三级
              if (selectedVal[2]) {
                this.selectData[selectedIndex[0].toString()].children[
                  selectedIndex[1].toString()
                ].children.forEach(function(v, i) {
                  if (v.value == selectedVal[2]) {
                    selectedIndex.push(i);
                    selectedTxt.push(v.text);
                  }
                });
              }
            }
          }
          console.log(selectedVal, selectedIndex, selectedTxt, "获取的数据");
        }
        //回显
        var selected = [];
        selectedTxt.forEach(function(v, i) {
          if (v != "") {
            selected.push(v);
          }
        });
        this.selected = selected;
        this.selectedCategoryTxt = selected.length
          ? 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)
        );
      }
    },
    // 获取处理进度
    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.length
        ? 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
                      });
                    }
                  });
                }
              });
            }
          });

          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.setCategory();
            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.setCategory();
            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: 2rem;
      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: 0.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>