一堆BUG修复

src/components/form/form.vue

@@ -1,427 +1,448 @@
 <template>
-  <form ref="form" class="cube-form" :class="formClass" :action="action" @submit="submitHandler" @reset="resetHandler">
+  <form
+    ref="form"
+    class="cube-form"
+    :class="formClass"
+    :action="action"
+    @submit="submitHandler"
+    @reset="resetHandler"
+  >
     <slot>
-      <cube-form-group v-for="(group, index) in groups" :fields="group.fields" :legend="group.legend" :key="index" />
+      <cube-form-group
+        v-for="(group, index) in groups"
+        :fields="group.fields"
+        :legend="group.legend"
+        :key="index"
+      />
     </slot>
   </form>
 </template>
 
 <script>
-  import { dispatchEvent } from '../../common/helpers/dom'
-  import { cb2PromiseWithResolve } from '../../common/helpers/util'
-  import CubeFormGroup from './form-group.vue'
-  import LAYOUTS from './layouts'
-  import mixin from './mixin'
+import { dispatchEvent } from "../../common/helpers/dom";
+import { cb2PromiseWithResolve } from "../../common/helpers/util";
+import CubeFormGroup from "./form-group.vue";
+import LAYOUTS from "./layouts";
+import mixin from "./mixin";
 
-  const COMPONENT_NAME = 'cube-form'
-  const EVENT_SUBMIT = 'submit'
-  const EVENT_RESET = 'reset'
-  const EVENT_VALIDATE = 'validate'
-  const EVENT_VALID = 'valid'
-  const EVENT_INVALID = 'invalid'
+const COMPONENT_NAME = "cube-form";
+const EVENT_SUBMIT = "submit";
+const EVENT_RESET = "reset";
+const EVENT_VALIDATE = "validate";
+const EVENT_VALID = "valid";
+const EVENT_INVALID = "invalid";
 
-  export default {
-    name: COMPONENT_NAME,
-    mixins: [mixin],
-    props: {
-      action: String,
-      model: {
-        type: Object,
-        default() {
-          /* istanbul ignore next */
-          return {}
-        }
-      },
-      schema: {
-        type: Object,
-        default() {
-          /* istanbul ignore next */
-          return {}
-        }
-      },
-      options: {
-        type: Object,
-        default() {
-          return {
-            scrollToInvalidField: false,
-            layout: LAYOUTS.STANDARD
-          }
-        }
-      },
-      immediateValidate: {
-        type: Boolean,
-        default: false
+export default {
+  name: COMPONENT_NAME,
+  mixins: [mixin],
+  props: {
+    action: String,
+    model: {
+      type: Object,
+      default() {
+        /* istanbul ignore next */
+        return {};
       }
     },
-    data() {
-      return {
-        validatedCount: 0,
-        dirty: false,
-        firstInvalidField: null,
-        firstInvalidFieldIndex: -1
+    schema: {
+      type: Object,
+      default() {
+        /* istanbul ignore next */
+        return {};
       }
     },
-    computed: {
-      groups() {
-        const schema = this.schema
-        const groups = schema.groups || []
-        if (schema.fields) {
-          groups.unshift({
-            fields: schema.fields
-          })
-        }
-        return groups
-      },
-      layout() {
-        const options = this.options
-        const layout = (options && options.layout) || LAYOUTS.STANDARD
-        return layout
-      },
-      formClass() {
-        const invalid = this.invalid
-        const valid = this.valid
-        const layout = this.layout
+    options: {
+      type: Object,
+      default() {
         return {
-          'cube-form_standard': layout === LAYOUTS.STANDARD,
-          'cube-form_groups': this.groups.length > 1,
-          'cube-form_validating': this.validating,
-          'cube-form_pending': this.pending,
-          'cube-form_valid': valid,
-          'cube-form_invalid': invalid,
-          'cube-form_classic': layout === LAYOUTS.CLASSIC,
-          'cube-form_fresh': layout === LAYOUTS.FRESH
-        }
+          scrollToInvalidField: false,
+          layout: LAYOUTS.STANDARD
+        };
       }
     },
-    watch: {
-      validatedCount() {
-        this.$emit(EVENT_VALIDATE, {
-          validity: this.validity,
-          valid: this.valid,
-          invalid: this.invalid,
-          dirty: this.dirty,
-          firstInvalidFieldIndex: this.firstInvalidFieldIndex
-        })
+    immediateValidate: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      validatedCount: 0,
+      dirty: false,
+      firstInvalidField: null,
+      firstInvalidFieldIndex: -1
+    };
+  },
+  computed: {
+    groups() {
+      const schema = this.schema;
+      const groups = schema.groups || [];
+      if (schema.fields) {
+        groups.unshift({
+          fields: schema.fields
+        });
       }
+      return groups;
     },
-    beforeCreate() {
-      this.form = this
-      this.fields = []
-      this.validity = {}
+    layout() {
+      const options = this.options;
+      const layout = (options && options.layout) || LAYOUTS.STANDARD;
+      return layout;
     },
-    mounted() {
-      if (this.immediateValidate) {
-        this.validate()
-      }
+    formClass() {
+      const invalid = this.invalid;
+      const valid = this.valid;
+      const layout = this.layout;
+      return {
+        "cube-form_standard": layout === LAYOUTS.STANDARD,
+        "cube-form_groups": this.groups.length > 1,
+        "cube-form_validating": this.validating,
+        "cube-form_pending": this.pending,
+        "cube-form_valid": valid,
+        "cube-form_invalid": invalid,
+        "cube-form_classic": layout === LAYOUTS.CLASSIC,
+        "cube-form_fresh": layout === LAYOUTS.FRESH
+      };
+    }
+  },
+  watch: {
+    validatedCount() {
+      this.$emit(EVENT_VALIDATE, {
+        validity: this.validity,
+        valid: this.valid,
+        invalid: this.invalid,
+        dirty: this.dirty,
+        firstInvalidFieldIndex: this.firstInvalidFieldIndex
+      });
+    }
+  },
+  beforeCreate() {
+    this.form = this;
+    this.fields = [];
+    this.validity = {};
+  },
+  mounted() {
+    if (this.immediateValidate) {
+      this.validate();
+    }
+  },
+  methods: {
+    submit(skipValidate = false) {
+      this.skipValidate = skipValidate;
+      dispatchEvent(this.$refs.form, "submit");
+      this.skipValidate = false;
+    },
+    reset() {
+      dispatchEvent(this.$refs.form, "reset");
     },
-    methods: {
-      submit(skipValidate = false) {
-        this.skipValidate = skipValidate
-        dispatchEvent(this.$refs.form, 'submit')
-        this.skipValidate = false
-      },
-      reset() {
-        dispatchEvent(this.$refs.form, 'reset')
-      },
-      submitHandler(e) {
-        if (this.skipValidate) {
-          this.$emit(EVENT_SUBMIT, e, this.model)
-          return
+    submitHandler(e) {
+      if (this.skipValidate) {
+        this.$emit(EVENT_SUBMIT, e, this.model);
+        return;
+      }
+      const submited = submitResult => {
+        if (submitResult) {
+          this.$emit(EVENT_VALID, this.validity);
+          this.$emit(EVENT_SUBMIT, e, this.model);
+        } else {
+          e.preventDefault();
+          this.$emit(EVENT_INVALID, this.validity);
         }
-        const submited = (submitResult) => {
-          if (submitResult) {
-            this.$emit(EVENT_VALID, this.validity)
-            this.$emit(EVENT_SUBMIT, e, this.model)
-          } else {
-            e.preventDefault()
-            this.$emit(EVENT_INVALID, this.validity)
+      };
+      if (this.valid === undefined) {
+        this._submit(submited);
+        if (this.validating || this.pending) {
+          // async validate
+          e.preventDefault();
+        }
+      } else {
+        submited(this.valid);
+      }
+    },
+    resetHandler(e) {
+      this._reset();
+      this.$emit(EVENT_RESET, e);
+    },
+    _submit(cb) {
+      this.validate(() => {
+        if (this.invalid) {
+          if (this.options.scrollToInvalidField && this.firstInvalidField) {
+            this.firstInvalidField.$el.scrollIntoView();
           }
         }
-        if (this.valid === undefined) {
-          this._submit(submited)
-          if (this.validating || this.pending) {
-            // async validate
-            e.preventDefault()
+        cb && cb(this.valid);
+      });
+    },
+    _reset() {
+      this.fields.forEach(fieldComponent => {
+        fieldComponent.reset();
+      });
+      this.setValidity();
+      this.setValidating();
+      this.setPending();
+    },
+    validate(cb) {
+      const promise = cb2PromiseWithResolve(cb);
+      if (promise) {
+        cb = promise.resolve;
+      }
+      let doneCount = 0;
+      const len = this.fields.length;
+      this.originValid = undefined;
+      this.fields.forEach(fieldComponent => {
+        fieldComponent.validate(() => {
+          doneCount++;
+          if (doneCount === len) {
+            // all done
+            cb && cb(this.valid);
           }
+        });
+      });
+      return promise;
+    },
+    updateValidating() {
+      const validating = this.fields.some(
+        fieldComponent => fieldComponent.validating
+      );
+      this.setValidating(validating);
+    },
+    updatePending() {
+      const pending = this.fields.some(
+        fieldComponent => fieldComponent.pending
+      );
+      this.setPending(pending);
+    },
+    setValidating(validating = false) {
+      this.validating = validating;
+    },
+    setPending(pending = false) {
+      this.pending = pending;
+    },
+    updateValidity(modelKey, valid, result, dirty) {
+      const curResult = this.validity[modelKey];
+      if (
+        curResult &&
+        curResult.valid === valid &&
+        curResult.result === result &&
+        curResult.dirty === dirty
+      ) {
+        return;
+      }
+      this.setValidity(modelKey, {
+        valid,
+        result,
+        dirty
+      });
+    },
+    setValidity(key, val) {
+      let validity = {};
+      if (key) {
+        Object.assign(validity, this.validity);
+        if (val === undefined) {
+          delete validity[key];
         } else {
-          submited(this.valid)
+          validity[key] = val;
         }
-      },
-      resetHandler(e) {
-        this._reset()
-        this.$emit(EVENT_RESET, e)
-      },
-      _submit(cb) {
-        this.validate(() => {
-          if (this.invalid) {
-            if (this.options.scrollToInvalidField && this.firstInvalidField) {
-              this.firstInvalidField.$el.scrollIntoView()
+      }
+
+      let dirty = false;
+      let invalid = false;
+      let valid = true;
+      let firstInvalidFieldKey = "";
+      this.fields.forEach(fieldComponent => {
+        const modelKey = fieldComponent.fieldValue.modelKey;
+        if (modelKey) {
+          const retVal = validity[modelKey];
+          if (retVal) {
+            if (retVal.dirty) {
+              dirty = true;
             }
-          }
-          cb && cb(this.valid)
-        })
-      },
-      _reset() {
-        this.fields.forEach((fieldComponent) => {
-          fieldComponent.reset()
-        })
-        this.setValidity()
-        this.setValidating()
-        this.setPending()
-      },
-      validate(cb) {
-        const promise = cb2PromiseWithResolve(cb)
-        if (promise) {
-          cb = promise.resolve
-        }
-        let doneCount = 0
-        const len = this.fields.length
-        this.originValid = undefined
-        this.fields.forEach((fieldComponent) => {
-          fieldComponent.validate(() => {
-            doneCount++
-            if (doneCount === len) {
-              // all done
-              cb && cb(this.valid)
+            if (retVal.valid === false) {
+              valid = false;
+            } else if (valid && !retVal.valid) {
+              valid = retVal.valid;
             }
-          })
-        })
-        return promise
-      },
-      updateValidating() {
-        const validating = this.fields.some((fieldComponent) => fieldComponent.validating)
-        this.setValidating(validating)
-      },
-      updatePending() {
-        const pending = this.fields.some((fieldComponent) => fieldComponent.pending)
-        this.setPending(pending)
-      },
-      setValidating(validating = false) {
-        this.validating = validating
-      },
-      setPending(pending = false) {
-        this.pending = pending
-      },
-      updateValidity(modelKey, valid, result, dirty) {
-        const curResult = this.validity[modelKey]
-        if (curResult && curResult.valid === valid && curResult.result === result && curResult.dirty === dirty) {
-          return
-        }
-        this.setValidity(modelKey, {
-          valid,
-          result,
-          dirty
-        })
-      },
-      setValidity(key, val) {
-        let validity = {}
-        if (key) {
-          Object.assign(validity, this.validity)
-          if (val === undefined) {
-            delete validity[key]
-          } else {
-            validity[key] = val
-          }
-        }
 
-        let dirty = false
-        let invalid = false
-        let valid = true
-        let firstInvalidFieldKey = ''
-        this.fields.forEach((fieldComponent) => {
-          const modelKey = fieldComponent.fieldValue.modelKey
-          if (modelKey) {
-            const retVal = validity[modelKey]
-            if (retVal) {
-              if (retVal.dirty) {
-                dirty = true
-              }
-              if (retVal.valid === false) {
-                valid = false
-              } else if (valid && !retVal.valid) {
-                valid = retVal.valid
-              }
-
-              if (!invalid && retVal.valid === false) {
-                // invalid
-                invalid = true
-                firstInvalidFieldKey = modelKey
-              }
-            } else if (fieldComponent.hasRules) {
-              if (valid) {
-                valid = undefined
-              }
-              validity[modelKey] = {
-                valid: undefined,
-                result: {},
-                dirty: false
-              }
+            if (!invalid && retVal.valid === false) {
+              // invalid
+              invalid = true;
+              firstInvalidFieldKey = modelKey;
+            }
+          } else if (fieldComponent.hasRules) {
+            if (valid) {
+              valid = undefined;
             }
+            validity[modelKey] = {
+              valid: undefined,
+              result: {},
+              dirty: false
+            };
           }
-        })
-        this.validity = validity
-        this.dirty = dirty
-        this.originValid = valid
-        this.setFirstInvalid(firstInvalidFieldKey)
-        this.validatedCount++
-      },
-      setFirstInvalid(key) {
-        if (!key) {
-          this.firstInvalidField = null
-          this.firstInvalidFieldIndex = -1
-          return
         }
-        this.fields.some((fieldComponent, index) => {
-          if (fieldComponent.fieldValue.modelKey === key) {
-            this.firstInvalidField = fieldComponent
-            this.firstInvalidFieldIndex = index
-            return true
-          }
-        })
-      },
-      addField(fieldComponent) {
-        this.fields.push(fieldComponent)
-      },
-      destroyField(fieldComponent) {
-        const i = this.fields.indexOf(fieldComponent)
-        this.fields.splice(i, 1)
-        this.setValidity(fieldComponent.fieldValue.modelKey)
+      });
+      this.validity = validity;
+      this.dirty = dirty;
+      this.originValid = valid;
+      this.setFirstInvalid(firstInvalidFieldKey);
+      this.validatedCount++;
+    },
+    setFirstInvalid(key) {
+      if (!key) {
+        this.firstInvalidField = null;
+        this.firstInvalidFieldIndex = -1;
+        return;
       }
+      this.fields.some((fieldComponent, index) => {
+        if (fieldComponent.fieldValue.modelKey === key) {
+          this.firstInvalidField = fieldComponent;
+          this.firstInvalidFieldIndex = index;
+          return true;
+        }
+      });
     },
-    beforeDestroy() {
-      this.form = null
-      this.firstInvalidField = null
+    addField(fieldComponent) {
+      this.fields.push(fieldComponent);
     },
-    components: {
-      CubeFormGroup
+    destroyField(fieldComponent) {
+      const i = this.fields.indexOf(fieldComponent);
+      this.fields.splice(i, 1);
+      this.setValidity(fieldComponent.fieldValue.modelKey);
     }
+  },
+  beforeDestroy() {
+    this.form = null;
+    this.firstInvalidField = null;
+  },
+  components: {
+    CubeFormGroup
   }
+};
 </script>
 
 <style lang="stylus" rel="stylesheet/stylus">
-  @require "../../common/stylus/variable.styl"
-  @require "../../common/stylus/mixin.styl"
+@require "../../common/stylus/variable.styl"
+@require "../../common/stylus/mixin.styl"
 
-  .cube-form
+.cube-form
+  position: relative
+  font-size: $fontsize-large
+  line-height: 1.429
+  color: $form-color
+  background-color: $form-bgc
+.cube-form_groups
+  .cube-form-group-legend
+    padding: 10px 15px
+    &:empty
+      padding-top: 5px
+      padding-bottom: 5px
+.cube-form_standard
+  .cube-form-item
+    min-height: 46px
+  .cube-form-field
+    flex: 1
+    font-size: $fontsize-medium
+  .cube-validator
+    display: flex
+    align-items: center
     position: relative
-    font-size: $fontsize-large
-    line-height: 1.429
-    color: $form-color
-    background-color: $form-bgc
-  .cube-form_groups
-    .cube-form-group-legend
-      padding: 10px 15px
-      &:empty
-        padding-top: 5px
-        padding-bottom: 5px
-  .cube-form_standard
-    .cube-form-item
-      min-height: 46px
-    .cube-form-field
-      flex: 1
-      font-size: $fontsize-medium
-    .cube-validator
-      display: flex
-      align-items: center
-      position: relative
-    .cube-validator_invalid
-      color: $form-invalid-color
-    .cube-validator-content
-      flex: 1
-    .cube-validator-msg-def
-      font-size: 0
-    .cube-validator_invalid
-      .cube-validator-msg
-        &::before
-          content: "\e614"
-          padding-left: 5px
-          font-family: "cube-icon"!important
-          font-size: $fontsize-large-xx
-          font-style: normal
-          -webkit-font-smoothing: antialiased
-          -webkit-text-stroke-width: 0.2px
-          -moz-osx-font-smoothing: grayscale
-    .cube-form-label
-      width: 95px
-      padding-right: 10px
-    .cube-checkbox-group, .cube-radio-group
-      &::before, &::after
-        display: none
-    .cube-input
-      input
-        padding: 13px 0
-        background-color: transparent
-      &::after
-        display: none
-    .cube-textarea-wrapper
+  .cube-validator_invalid
+    color: $form-invalid-color
+  .cube-validator-content
+    flex: 1
+  .cube-validator-msg-def
+    font-size: 0
+  .cube-validator_invalid
+    .cube-validator-msg
+      &::before
+        content: "\e614"
+        padding-left: 5px
+        font-family: "cube-icon"!important
+        font-size: $fontsize-large-xx
+        font-style: normal
+        -webkit-font-smoothing: antialiased
+        -webkit-text-stroke-width: 0.2px
+        -moz-osx-font-smoothing: grayscale
+  .cube-form-label
+    width: 125px
+    padding-right: 10px
+  .cube-checkbox-group, .cube-radio-group
+    &::before, &::after
+      display: none
+  .cube-input
+    input
       padding: 13px 0
-      height: 20px
-      &.cube-textarea_expanded
-        height: 60px
-        padding-bottom: 20px
-        .cube-textarea-indicator
-          bottom: 2px
-      .cube-textarea
-        padding: 0
-        background-color: transparent
-      &::after
-        display: none
-    .cube-select
-      padding-left: 0
       background-color: transparent
-      &::after
-        display: none
-    .cube-upload-def
-      padding: 5px 0
-      .cube-upload-btn, .cube-upload-file
-        margin: 5px 10px 5px 0
-  .cube-form_classic
-    .cube-form-item
-      display: block
-      padding: 15px
-      &:last-child
-        padding-bottom: 30px
-      &::after
-        display: none
-      .cube-validator-msg
-        position: absolute
-        margin-top: 3px
-        &::before
-          display: none
-      .cube-validator-msg-def
-        font-size: $fontsize-small
-    .cube-form-item_btn
-      padding-top: 0
-      padding-bottom: 0
-      &:last-child
-        padding-bottom: 0
-    .cube-form-label
-      padding-bottom: 15px
-  .cube-form_fresh
-    .cube-form-item
-      display: block
-      padding: 2em 15px 10px
-      &::after
+    &::after
+      display: none
+  .cube-textarea-wrapper
+    padding: 13px 0
+    height: 20px
+    &.cube-textarea_expanded
+      height: 60px
+      padding-bottom: 20px
+      .cube-textarea-indicator
+        bottom: 2px
+    .cube-textarea
+      padding: 0
+      background-color: transparent
+    &::after
+      display: none
+  .cube-select
+    padding-left: 0
+    background-color: transparent
+    &::after
+      display: none
+  .cube-upload-def
+    padding: 5px 0
+    .cube-upload-btn, .cube-upload-file
+      margin: 5px 10px 5px 0
+.cube-form_classic
+  .cube-form-item
+    display: block
+    padding: 15px
+    &:last-child
+      padding-bottom: 30px
+    &::after
+      display: none
+    .cube-validator-msg
+      position: absolute
+      margin-top: 3px
+      &::before
         display: none
-      .cube-validator-msg
-        position: absolute
-        top: 1em
-        right: 15px
-        bottom: auto
-        margin-top: -.4em
-        font-size: $fontsize-small
-        &::before
-          display: none
-      .cube-validator-msg-def
-        font-size: 100%
-    .cube-form-item_btn
-      padding-top: 0
+    .cube-validator-msg-def
+      font-size: $fontsize-small
+  .cube-form-item_btn
+    padding-top: 0
+    padding-bottom: 0
+    &:last-child
       padding-bottom: 0
-      &:last-child
-        padding-bottom: 0
-    .cube-form-label
+  .cube-form-label
+    padding-bottom: 15px
+.cube-form_fresh
+  .cube-form-item
+    display: block
+    padding: 2em 15px 10px
+    &::after
+      display: none
+    .cube-validator-msg
       position: absolute
       top: 1em
+      right: 15px
+      bottom: auto
       margin-top: -.4em
       font-size: $fontsize-small
+      &::before
+        display: none
+    .cube-validator-msg-def
+      font-size: 100%
+  .cube-form-item_btn
+    padding-top: 0
+    padding-bottom: 0
+    &:last-child
+      padding-bottom: 0
+  .cube-form-label
+    position: absolute
+    top: 1em
+    margin-top: -.4em
+    font-size: $fontsize-small
 </style>

src/filters/index.js

@@ -0,0 +1,45 @@
+import Vue from "vue";
+Vue.filter("timeFormat", function(date, fmt) {
+  if (!date) {
+    return "";
+  }
+  if (typeof date === "string") {
+    var dateArr = date.split(/[- : \/]/);
+    date = new Date(
+      dateArr[0],
+      dateArr[1] - 1,
+      dateArr[2],
+      dateArr[3],
+      dateArr[4],
+      dateArr[5]
+    );
+  } else if (typeof date === "number") {
+    date = new Date(date);
+  }
+  if (/(y+)/.test(fmt)) {
+    fmt = fmt.replace(
+      RegExp.$1,
+      (date.getFullYear() + "").substr(4 - RegExp.$1.length)
+    );
+  }
+  let o = {
+    "M+": date.getMonth() + 1,
+    "d+": date.getDate(),
+    "H+": date.getHours(),
+    "m+": date.getMinutes(),
+    "s+": date.getSeconds()
+  };
+  for (let k in o) {
+    if (new RegExp(`(${k})`).test(fmt)) {
+      let str = o[k] + "";
+      fmt = fmt.replace(
+        RegExp.$1,
+        RegExp.$1.length === 1 ? str : padLeftZero(str)
+      );
+    }
+  }
+  function padLeftZero(str) {
+    return ("00" + str).substr(str.length);
+  }
+  return fmt;
+});

src/main.js

@@ -1,47 +1,49 @@
 // The Vue build version to load with the `import` command
 // (runtime-only or standalone) has been set in webpack.base.conf with an alias.
-import Vue from 'vue'
-import App from './App'
-import router from './router'
-import axios from 'axios'
-import Cube from './index'
-import Store from './store/store'
-import http from '../src/request/http'
-import 'lib-flexible'
-Vue.use(Cube)
+import Vue from "vue";
+import App from "./App";
+import router from "./router";
+import axios from "axios";
+import Cube from "./index";
+import Store from "./store/store";
+// import http from "../src/request/http";
+import "lib-flexible";
+import "./filters";
+Vue.use(Cube);
 // 设置默认请求接口（删掉地址栏中的后缀）
 // axios.defaults.baseURL = http.host;
 // axios.defaults.timeout = 5000;
-axios.defaults.headers['Content-Type'] = 'application/json;charset=UTF-8';
+axios.defaults.headers["Content-Type"] = "application/json;charset=UTF-8";
 
-
-Vue.prototype.$http = axios
-Vue.config.productionTip = false
+Vue.prototype.$http = axios;
+Vue.config.productionTip = false;
 // http request拦截器 添加一个请求拦截器
-axios.interceptors.request.use(function (config) {
-  document.cookie = "JSESSIONID=A835F24A945D3E045DEE5FA5C3AD40AB";
-  let token = window.localStorage.getItem("token")
-  if (token) {
-    config.headers['access-token'] = token; //将token放到请求头发送给服务器
+axios.interceptors.request.use(
+  function(config) {
+    document.cookie = "JSESSIONID=A835F24A945D3E045DEE5FA5C3AD40AB";
+    let token = window.localStorage.getItem("token");
+    if (token) {
+      config.headers["access-token"] = token; //将token放到请求头发送给服务器
+    }
+    return config;
+  },
+  function(error) {
+    return Promise.reject(error);
   }
-  return config;
-}, function (error) {
-  return Promise.reject(error);
-});
+);
 
-
-let count=0;
+let count = 0;
 // http response 拦截器
 axios.interceptors.response.use(
   response => {
-    if(response.data.state==433&&count<1){
+    if (response.data.state == 433 && count < 1) {
       count++;
-      alert(response.data.error+'，请重新登录！')
+      alert(response.data.error + "，请重新登录！");
       router.push({ path: "/login" });
       window.location.reload();
     }
-    return response
-  },
+    return response;
+  }
   // error => {
   //   if (error.response) {
   //       alert(error.response.status)
@@ -62,14 +64,14 @@ axios.interceptors.response.use(
   //   // console.log(JSON.stringify(error));//console : Error: Request failed with status code 402
   //   return Promise.reject(response.data.error)
   // },
-)
+);
 /* eslint-disable no-new */
 new Vue({
-  el: '#app',
+  el: "#app",
   router,
   components: {
     App
   },
-  template: '<App/>',
-  store:Store
-})
+  template: "<App/>",
+  store: Store
+});

src/router/index.js

@@ -1,44 +1,51 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Login from './../views/Login.vue'
-import Main from './../views/Main.vue'
-import Indes from './../views/indes.vue' //首页
-import WxChartList from './../views/wxChartList.vue' //微信/WEB报障
-import IncidentList from './../views/incidentList.vue' //事件列表
-import RecordList from './../views/RecordList.vue' //留言列表
-import NewIncident from './../views/newIncident.vue' //新建事件
-import Guide from './../views/guide.vue' //公告公示
-import GuideDetail from './../views/guideDetail.vue' //公告详情
-import IncidentDetail from './../views/incidentDetail.vue' //事件详情
-import WxChartDetail from './../views/wxChartDetail.vue' //微信/WEB报障详情
-Vue.use(Router)
+import Vue from "vue";
+import Router from "vue-router";
+import Login from "./../views/Login.vue";
+import Main from "./../views/Main.vue";
+import Indes from "./../views/indes.vue"; //首页
+import WxChartList from "./../views/wxChartList.vue"; //微信/WEB报障
+import IncidentList from "./../views/incidentList.vue"; //事件列表
+import RecordList from "./../views/RecordList.vue"; //留言列表
+import NewIncident from "./../views/newIncident.vue"; //新建事件
+import Guide from "./../views/guide.vue"; //公告公示
+import GuideDetail from "./../views/guideDetail.vue"; //公告详情
+import WxChartDetail from "./../views/wxChartDetail.vue"; //微信/WEB报障详情
+import Order from "./../views/order.vue"; //接单页面
+import GrabSheet from "./../views/grabSheet.vue"; //抢单页面
+import AgainAssign from "./../views/againAssign.vue"; //重新指派页面
+import Processing from "./../views/processing.vue"; //处理中页面
+import Solved from "./../views/solved.vue"; //已解决页面
+import Closed from "./../views/closed.vue"; //已关闭页面
+Vue.use(Router);
 
-const router= new Router({
-  routes: [{
-      path: '/login',
+const router = new Router({
+  routes: [
+    {
+      path: "/login",
       component: Login,
-      name: '',
+      name: "",
       hidden: true
     },
     {
-      path: '/main',
+      path: "/main",
       component: Main,
-      name: '',
+      name: "",
       hidden: true,
-      children: [{
-          path: '/',
-          redirect: '/main/indes'
+      children: [
+        {
+          path: "/",
+          redirect: "/main/indes"
         },
         {
-          path: '/main/indes',
+          path: "/main/indes",
           component: Indes,
           meta: {
             allowBack: false
-          },
+          }
         },
         {
-          path: '/main/wxChartList',
-          name: 'WxChartList',
+          path: "/main/wxChartList",
+          name: "WxChartList",
           component: WxChartList,
           meta: {
             allowBack: false
@@ -46,8 +53,8 @@ const router= new Router({
           children: []
         },
         {
-          path: '/main/incidentList',
-          name: 'IncidentList',
+          path: "/main/incidentList",
+          name: "IncidentList",
           component: IncidentList,
           meta: {
             allowBack: false
@@ -55,83 +62,122 @@ const router= new Router({
           children: []
         },
         {
-          path: '/main/recordList',
-          name: 'RecordList',
+          path: "/main/recordList",
+          name: "RecordList",
           component: RecordList,
           meta: {
             allowBack: false
           },
           children: []
-        },
+        }
       ]
     },
     {
-      path: '/incidentDetail',
-      name: 'IncidentDetail',
-      component: IncidentDetail,
+      path: "/order",
+      name: "Order",
+      component: Order,
+      meta: {
+        allowBack: false
+      }
+    },
+    {
+      path: "/grabSheet",
+      name: "GrabSheet",
+      component: GrabSheet,
+      meta: {
+        allowBack: false
+      }
+    },
+    {
+      path: "/againAssign",
+      name: "AgainAssign",
+      component: AgainAssign,
+      meta: {
+        allowBack: false
+      }
+    },
+    {
+      path: "/processing",
+      name: "Processing",
+      component: Processing,
       meta: {
         allowBack: false
-      },
-    },{
-      path: '/wxChartDetail',
-      name: 'WxChartDetail',
+      }
+    },
+    {
+      path: "/solved",
+      name: "Solved",
+      component: Solved,
+      meta: {
+        allowBack: false
+      }
+    },
+    {
+      path: "/closed",
+      name: "Closed",
+      component: Closed,
+      meta: {
+        allowBack: false
+      }
+    },
+    {
+      path: "/wxChartDetail",
+      name: "WxChartDetail",
       component: WxChartDetail,
       meta: {
         allowBack: false
-      },
+      }
     },
     {
-      path: '/newIncident',
-      name: 'NewIncident',
+      path: "/newIncident",
+      name: "NewIncident",
       component: NewIncident,
       meta: {
         allowBack: false
-      },
+      }
     },
     {
-      path: '/guide',
+      path: "/guide",
       component: Guide,
       meta: {
         allowBack: false
-      },
+      }
     },
     {
-      path: '/guideDetail',
-      name: 'GuideDetail',
+      path: "/guideDetail",
+      name: "GuideDetail",
       component: GuideDetail,
       meta: {
         allowBack: false
-      },
+      }
     },
     // {
     //   path: '/',
     //   redirect: '/login'
     // },
     {
-      path: '*',
+      path: "*",
       hidden: true,
       redirect: {
-        path: '/login'
+        path: "/login"
       }
     }
   ]
 });
 
-
-
 // 导航守卫
 // 使用 router.beforeEach 注册一个全局前置守卫，判断用户是否登陆
 router.beforeEach((to, from, next) => {
-  if (to.path === '/login') {
+  if (to.path === "/login") {
     next();
   } else {
-    let token = localStorage.getItem('token');
-    if (token === 'null' || token === '') {
-      next('/login');
+    let token = localStorage.getItem("token");
+    if (token === "null" || token === "") {
+      next("/login");
     } else {
       next();
     }
   }
 });
- 
-export default router;
+
+export default router;

src/views/againAssign.vue

@@ -0,0 +1,687 @@
+<template>
+  <div class="againAssign">
+    <div class="conentBox">
+      <div class="header">处理方案</div>
+      <div v-if="model.incident" class="conent">
+        <div class="navBar">
+          <div class="fl p50">
+            <a
+              :class="{ active: actives == 'info' }"
+              href="javascript:;"
+              @click="toInfo('info')"
+              >事件信息</a
+            >
+          </div>
+          <div class="fl p50">
+            <a
+              :class="{ active: actives == 'assignee' }"
+              href="javascript:;"
+              @click="toInfo('assignee')"
+              >重新指派</a
+            >
+          </div>
+          <!-- <div class="fl">
+            <a
+              :class="{ active: actives == 'progress' }"
+              href="javascript:;"
+              @click="toInfo('progress')"
+              >处理进度</a
+            >
+          </div> -->
+        </div>
+        <div class="label headtop" id="info">事件信息</div>
+
+        <div class="info">
+          <div class="head">
+            <p>
+              <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+              事件编号：{{ model.incident.incidentsign }}
+              <span class="fr btn chongxinzhipai">{{
+                model.incident.state.name
+              }}</span>
+            </p>
+          </div>
+          <p>
+            <span class="fl">事件分类</span>
+            <span class="fr">{{ model.incident.category.category }}</span>
+          </p>
+          <!-- <p>
+            <span class="fl">事件主题</span>
+            <span class="fr">{{model.incident.title}}</span>
+          </p> -->
+          <p class="desc">
+            <span class="fl">事件描述</span>
+            <span
+              class="fr grayFont"
+              v-html="model.incident.description"
+            ></span>
+          </p>
+          <div class="shows" id="shows">
+            <p v-if="valConfig == 2">
+              <span class="fl">报修科室</span>
+              <span class="fr">{{
+                model.incident.department ? model.incident.department.dept : ""
+              }}</span>
+            </p>
+            <p v-if="valConfig == 1">
+              <span class="fl">报修人</span>
+              <span class="fr">{{ model.incident.requester.name }}</span>
+            </p>
+            <p v-if="valConfig == 2">
+              <span class="fl">联系人</span>
+              <span class="fr">{{ model.incident.contacts }}</span>
+            </p>
+            <p>
+              <span class="fl">联系电话</span>
+              <span
+                class="fr"
+                v-if="!model.incident.contactsInformation"
+              ></span>
+              <span class="fr" v-if="model.incident.contactsInformation"
+                ><a :href="'tel:' + model.incident.contactsInformation"
+                  ><i class="iconfont icon-shouji"></i
+                  >{{ model.incident.contactsInformation }}</a
+                ></span
+              >
+            </p>
+            <p>
+              <span class="fl">联系地址</span>
+              <span class="fr">{{ model.incident.houseNumber || "" }}</span>
+            </p>
+            <p class="boeder_B">
+              <span class="fl">事件来源</span>
+              <span class="fr">{{ model.incident.source.name }}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">影响度</span>
+              <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">紧急度</span>
+              <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+            </p> -->
+            <p>
+              <span class="fl">优先级</span>
+              <span class="fr">{{
+                model.incident.priority ? model.incident.priority.name : ""
+              }}</span>
+            </p>
+            <p>
+              <span class="fl">逾期响应时间</span>
+              <span class="fr">{{ model.incident.overdueResponseDate }}</span>
+            </p>
+            <p>
+              <span class="fl">逾期解决时间</span>
+              <span class="fr">{{ model.incident.overdueTime }}</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="assignee">重新指派</div>
+          <div class="info">
+            <p>
+              <span class="fl">重新指派原因:</span>
+              <span class="fr">{{ model.resignComment }}</span>
+            </p>
+          </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="model.incident.handlerUser.id == loginUser.id">
+            <div class="label">指派</div>
+            <div class="form">
+              <div class="txtLabel">
+                <div class="txt fl handler">
+                  <span style="color:red;">*</span>是否选择处理人：
+                </div>
+                <cube-switch v-model="handleUserOrGroup"></cube-switch>
+              </div>
+              <div class="txtLabel" v-if="handleUserOrGroup">
+                <div class="txt fl">
+                  <span style="color:red;">*</span> 处理人:
+                </div>
+                <cube-select
+                  class="selectGroup fl"
+                  v-model="handlerUser"
+                  :title="'请选择处理人'"
+                  :options="handlerUserArr"
+                  :placeholder="'请选择处理人'"
+                ></cube-select>
+              </div>
+              <div class="txtLabel" v-if="!handleUserOrGroup">
+                <div class="txt fl">
+                  <span style="color:red;">*</span> 处理组:
+                </div>
+                <cube-select
+                  class="selectGroup fl"
+                  v-model="handlerGroup"
+                  :title="'请选择处理组'"
+                  :options="candidateGroupsArr"
+                  :placeholder="'请选择处理组'"
+                ></cube-select>
+              </div>
+              <cube-form-group class="sub">
+                <cube-button type="submit" @click="subVali()">提交</cube-button>
+              </cube-form-group>
+            </div>
+          </div> -->
+        </div>
+      </div>
+      <load-ing v-if="!model.incident"></load-ing>
+      <promp-ting
+        :conents="promptingConent"
+        :status="promptingStatus"
+      ></promp-ting>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+import PrompTing from "./../views/prompting.vue";
+export default {
+  data() {
+    return {
+      id: "",
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      promptingConent: "",
+      promptingStatus: "",
+      item_hides: false,
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {}, //提交数据
+      handleUserOrGroup: false, //处理人/处理组
+      handlerUserArr: [], //处理人
+      candidateGroupsArr: [], //处理组
+      handlerUser: "", //处理人
+      handlerGroup: "", //处理组
+      pro_hides: false //展开/收起处理进度
+    };
+  },
+  components: {
+    LoadIng,
+    PrompTing
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/receiveform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id +
+            "/" +
+            that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    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
+      );
+    },
+    // 获取处理人
+    getHandlerUser() {
+      var that = this;
+      this.$http
+        .post("service/user/data/fetchDataList/user", {
+          idx: 0,
+          sum: 1000,
+          user: {
+            roledata: { rolecode: "first-line support" },
+            selectType: "1"
+          }
+        })
+        .then(function(res) {
+          res.data.list.forEach(function(v, i) {
+            that.handlerUserArr.push({
+              text: v.name,
+              value: v.id
+            });
+          });
+        });
+    },
+    // 获取处理组
+    getCandidateGroups() {
+      var that = this;
+      this.$http
+        .post("service/user/data/fetchDataList/group", {
+          idx: 0,
+          sum: 1000,
+          group: { selectType: "nouser" }
+        })
+        .then(function(res) {
+          res.data.list.forEach(function(v, i) {
+            that.candidateGroupsArr.push({
+              text: v.groupName,
+              value: v.id
+            });
+          });
+          console.log(that.candidateGroupsArr);
+        });
+    },
+    subVali() {
+      var that = this;
+
+      if (
+        (!that.handleUserOrGroup && !that.handlerGroup) ||
+        (that.handleUserOrGroup && !that.handlerUser)
+      ) {
+        $("#fade").fadeIn();
+        that.promptingConent = "提交失败,请填写必填信息!";
+        that.promptingStatus = false;
+        setTimeout(function() {
+          $("#fade").fadeOut();
+        }, 2000);
+      }
+
+      that.model.handler_code = "resolve";
+      delete that.model.receive_code;
+      if (that.handleUserOrGroup) {
+        delete that.model.candidateGroups;
+        that.model.assignee = that.handlerUser;
+      } else {
+        delete that.model.assignee;
+        delete that.model.incident.assignee;
+        that.model.candidateGroups = that.handlerGroup;
+      }
+      that.$http
+        .post(
+          "service/bpm/bpm/completeTask/" +
+            that.model.incident.taskId +
+            "/" +
+            that.loginUser.id,
+          that.model
+        )
+        .then(function(res) {
+          if (res.data.status == 200) {
+            $("#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();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    }
+  },
+  created() {
+    this.processInstanceId = this.$route.params.data.processInstanceId;
+    this.id = this.$route.params.data.id;
+    this.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+    this.getHandlerUser();
+    this.getCandidateGroups();
+  }
+};
+</script>
+<style lang="less" scoped>
+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;
+    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: 25%;
+          color: #666;
+          &.handler {
+            width: 40%;
+          }
+        }
+        .selectGroup {
+          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>

src/views/closed.vue

@@ -0,0 +1,645 @@
+<template>
+  <div class="closed">
+    <div class="conentBox">
+      <div class="header">处理方案</div>
+      <div v-if="model.incident" class="conent">
+        <div class="navBar">
+          <div class="fl">
+            <a
+              :class="{ active: actives == 'info' }"
+              href="javascript:;"
+              @click="toInfo('info')"
+              >事件信息</a
+            >
+          </div>
+          <div class="fl">
+            <a
+              :class="{ active: actives == 'handlerInfo' }"
+              href="javascript:;"
+              @click="toInfo('handlerInfo')"
+              >处理信息</a
+            >
+          </div>
+          <div class="fl">
+            <a
+              :class="{ active: actives == 'closeInfo' }"
+              href="javascript:;"
+              @click="toInfo('closeInfo')"
+              >关单信息</a
+            >
+          </div>
+          <div class="fl">
+            <a
+              :class="{ active: actives == 'progress' }"
+              href="javascript:;"
+              @click="toInfo('progress')"
+              >处理进度</a
+            >
+          </div>
+        </div>
+
+        <div class="info">
+          <div class="label headtop" id="info">事件信息</div>
+          <div class="head">
+            <p>
+              <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+              事件编号：{{ model.incident.incidentsign }}
+              <span class="fr btn yiguanbi">{{
+                model.incident.state.name
+              }}</span>
+            </p>
+          </div>
+          <p>
+            <span class="fl">事件分类</span>
+            <span class="fr">{{ model.incident.category.category }}</span>
+          </p>
+          <!-- <p>
+            <span class="fl">事件主题</span>
+            <span class="fr">{{model.incident.title}}</span>
+          </p> -->
+          <p class="desc">
+            <span class="fl">事件描述</span>
+            <span
+              class="fr grayFont"
+              v-html="model.incident.description"
+            ></span>
+          </p>
+          <div class="shows" id="shows">
+            <p v-if="valConfig == 2">
+              <span class="fl">报修科室</span>
+              <span class="fr">{{
+                model.incident.department ? model.incident.department.dept : ""
+              }}</span>
+            </p>
+            <p v-if="valConfig == 1">
+              <span class="fl">报修人</span>
+              <span class="fr">{{ model.incident.requester.name }}</span>
+            </p>
+            <p v-if="valConfig == 2">
+              <span class="fl">联系人</span>
+              <span class="fr">{{ model.incident.contacts }}</span>
+            </p>
+            <p>
+              <span class="fl">联系电话</span>
+              <span class="fr" v-if="!model.incident.contactsInformation"></span>
+              <span class="fr" v-if="model.incident.contactsInformation"><a :href="'tel:' + model.incident.contactsInformation"><i class="iconfont icon-shouji"></i>{{ model.incident.contactsInformation }}</a></span>
+            </p>
+            <p>
+              <span class="fl">联系地址</span>
+              <span class="fr">{{ model.incident.houseNumber || "" }}</span>
+            </p>
+            <p class="boeder_B">
+              <span class="fl">事件来源</span>
+              <span class="fr">{{ model.incident.source.name }}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">影响度</span>
+              <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">紧急度</span>
+              <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+            </p> -->
+            <p>
+              <span class="fl">优先级</span>
+              <span class="fr">{{
+                model.incident.priority ? model.incident.priority.name : ""
+              }}</span>
+            </p>
+            <p>
+              <span class="fl">逾期响应时间</span>
+              <span class="fr">{{ model.incident.overdueResponseDate }}</span>
+            </p>
+            <p>
+              <span class="fl">逾期解决时间</span>
+              <span class="fr">{{ model.incident.overdueTime }}</span>
+            </p>
+            <p>
+              <span class="fl">区域</span>
+              <span class="fr">{{
+                model.incident.place ? model.incident.place.area.area : "--"
+              }}</span>
+            </p>
+            <p>
+              <span class="fl">地点</span>
+              <span class="fr">{{
+                model.incident.place ? model.incident.place.place : "--"
+              }}</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="handlerInfo">处理信息</div>
+          <!-- <p>
+            <span class="fl">升级对象</span>
+            <span class="fr">{{model.isupreason?model.handlerUser.name:''}}</span>
+          </p>
+          <p>
+            <span class="fl">升级原因</span>
+            <span class="fr">{{model.isupreason?model.isupreason:''}}</span>
+          </p> -->
+          <p>
+            <span class="fl">处理方式</span>
+            <span class="fr showwrap">{{
+              model.incident.handleCategory
+                ? model.incident.handleCategory.name
+                : ""
+            }}</span>
+          </p>
+          <div class="shows1" id="shows1">
+            <p>
+              <span class="fl">确认事件分类</span>
+              <span class="fr">{{ model.incident.category.category }}</span>
+            </p>
+            <p>
+              <span class="fl">关闭代码</span>
+              <span class="fr">{{
+                model.incident.closecode ? model.incident.closecode.name : ""
+              }}</span>
+            </p>
+            <p class="desc">
+              <span class="fl">处理方案</span>
+              <span
+                class="fr grayFont"
+                v-html="model.incident.handleDescription"
+              ></span>
+            </p>
+          </div>
+          <p class="info_hide">
+            <span class="fl hide" @click="hides1()" v-if="!item_hides1"
+              >展开详情 >></span
+            >
+            <span class="fl hide" @click="hides1()" v-if="item_hides1"
+              >隐藏详情<<</span
+            >
+          </p>
+
+          <div class="label" id="closeInfo">关单信息</div>
+          <p>
+            <span class="fl">是否已解决</span>
+            <span class="fr">{{
+              model.isclose == "close" ? "已解决" : "未解决"
+            }}</span>
+          </p>
+          <p>
+            <span class="fl">结果类型</span>
+            <span class="fr">{{
+              model.incident.handleResult
+                ? model.incident.handleResult.name
+                : ""
+            }}</span>
+          </p>
+          <p>
+            <span class="fl">满意度评价</span>
+            <span class="fr">{{
+              model.incident.degree ? model.incident.degree.name : ""
+            }}</span>
+          </p>
+          <p>
+            <span class="fl">回访备注</span>
+            <span class="fr">{{ model.incident.visitRemarks || "" }}</span>
+          </p>
+
+          <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>
+      </div>
+      <load-ing v-if="!model.incident"></load-ing>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+export default {
+  data() {
+    return {
+      id: "",
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      selected: 1,
+      options: [
+        {
+          label: "接单",
+          value: 1
+        },
+        {
+          label: "关单信息",
+          value: 2
+        }
+      ],
+      resignComment: "", //重新指派原因
+      item_hides: false,
+      item_hides1: false,
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {}, //提交数据
+      pro_hides: false //展开/收起处理进度
+    };
+  },
+  components: {
+    LoadIng
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/receiveform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id +
+            "/" +
+            that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          //seimin
+          localStorage.setItem("modelData", JSON.stringify(that.model));
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    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;
+    },
+    //隐藏显示详情
+    hides1() {
+      this.item_hides1 = !this.item_hides1;
+      $("#shows1").slideToggle();
+    },
+    // 快速定位
+    toInfo(id) {
+      this.actives = id;
+      $("body,html").animate(
+        {
+          scrollTop:
+            $("#" + id).offset().top -
+            $(".header")[0].offsetHeight -
+            $(".navBar")[0].offsetHeight
+        },
+        260
+      );
+    }
+  },
+  created() {
+    // seimin
+    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.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+  }
+};
+</script>
+<style lang="less" scoped>
+i.iconfont {
+  &.blue {
+    color: #005395;
+    // &::after {
+    //   content: "";
+    //   width: 0.01rem;
+    //   height: 0.4rem;
+    //   background: #005395;
+    //   position: relative;
+    //   display: block;
+    //   left: 0.14rem;
+    // }
+  }
+  &.blue1 {
+    color: #005395;
+  }
+}
+.closed {
+  .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;
+    div {
+      width: 25%;
+      text-align: center;
+      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;
+      }
+
+      .shows1 {
+        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>

src/views/grabSheet.vue

@@ -0,0 +1,602 @@
+<template>
+  <div class="grabSheet">
+    <div class="conentBox">
+      <div class="conent">
+        <div class="header">处理方案</div>
+        <div class="box" v-if="model.incident">
+          <div class="navBar">
+            <div class="fl">
+              <a
+                :class="{ active: actives == 'info' }"
+                href="javascript:;"
+                @click="toInfo('info')"
+                >事件信息</a
+              >
+            </div>
+            <div class="fl">
+              <a
+                :class="{ active: actives == 'progress' }"
+                href="javascript:;"
+                @click="toInfo('progress')"
+                >处理进度</a
+              >
+            </div>
+          </div>
+          <div class="label headtop" id="info">事件信息</div>
+
+          <div class="info">
+            <div class="head">
+              <p>
+                <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+                事件编号：{{
+                  model.incident ? model.incident.incidentsign : ""
+                }}
+                <span class="fr btn daiqiangdan">待抢单</span>
+              </p>
+            </div>
+            <p>
+              <span class="fl">事件分类</span>
+              <span class="fr">{{
+                model.incident.category.category || ""
+              }}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">事件主题</span>
+              <span class="fr">{{model.incident.title||''}}</span>
+            </p> -->
+            <p class="desc">
+              <span class="fl">事件描述</span>
+              <span
+                class="fr grayFont"
+                v-html="model.incident.description"
+              ></span>
+            </p>
+            <div class="shows" id="shows">
+              <p v-if="valConfig == 2">
+                <span class="fl">报修科室</span>
+                <span class="fr">{{
+                  model.incident.department
+                    ? model.incident.department.dept
+                    : ""
+                }}</span>
+              </p>
+              <p v-if="valConfig == 1">
+                <span class="fl">报修人</span>
+                <span class="fr">{{ model.incident.requester.name }}</span>
+              </p>
+              <p v-if="valConfig == 2">
+                <span class="fl">联系人</span>
+                <span class="fr">{{ model.incident.contacts }}</span>
+              </p>
+              <p>
+                <span class="fl">联系电话</span>
+                <span
+                  class="fr"
+                  v-if="!model.incident.contactsInformation"
+                ></span>
+                <span class="fr" v-if="model.incident.contactsInformation"
+                  ><a :href="'tel:' + model.incident.contactsInformation"
+                    ><i class="iconfont icon-shouji"></i
+                    >{{ model.incident.contactsInformation }}</a
+                  ></span
+                >
+              </p>
+              <p>
+                <span class="fl">联系地址</span>
+                <span class="fr">{{
+                  model.incident.houseNumber || "" || ""
+                }}</span>
+              </p>
+              <p class="boeder_B">
+                <span class="fl">事件来源</span>
+                <span class="fr">{{ model.incident.source.name || "" }}</span>
+              </p>
+              <!-- <p>
+                <span class="fl">影响度</span>
+                <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+              </p>
+              <p>
+                <span class="fl">紧急度</span>
+                <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+              </p> -->
+              <p>
+                <span class="fl">优先级</span>
+                <span class="fr">{{
+                  model.incident.priority ? model.incident.priority.name : ""
+                }}</span>
+              </p>
+              <p>
+                <span class="fl">逾期响应时间</span>
+                <span class="fr">{{
+                  model.incident.overdueResponseDate || ""
+                }}</span>
+              </p>
+              <p>
+                <span class="fl">逾期解决时间</span>
+                <span class="fr">{{ model.incident.overdueTime || "" }}</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>
+          <!-- <cube-form-group class="sub">
+            <cube-button type="submit" @click="subVali()">抢单</cube-button>
+          </cube-form-group> -->
+        </div>
+      </div>
+
+      <load-ing v-if="!model.incident"></load-ing>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+export default {
+  data() {
+    return {
+      id: "",
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      selected: 1,
+      options: [
+        {
+          label: "接单",
+          value: 1
+        },
+        {
+          label: "重新指派",
+          value: 2
+        }
+      ],
+      resignComment: "", //重新指派原因
+      item_hides: false,
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {}, //提交数据
+      jurisdiction: false, //是否有抢单权限
+      pro_hides: false //展开/收起处理进度
+    };
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      var groups = [];
+      that.loginUser.group.forEach(element => {
+        groups.push(element.id);
+      });
+      console.log(groups);
+      that.$http
+        .get(
+          "/service/form/renderForm/receiveform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id +
+            "/" +
+            that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          for (var i = 0; i < groups.length; i++) {
+            if (groups[i] == that.model.incident.candidateGroups) {
+              that.jurisdiction = true;
+            }
+          }
+          //seimin
+          localStorage.setItem("modelData", JSON.stringify(that.model));
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    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;
+    },
+    subVali() {
+      //数据提交
+      var that = this;
+      that.$http
+        .post(
+          "service/bpm/bpm/claimAndCompletedTask/" + that.model.incident.taskId,
+          { receive_code: "handler", userId: that.loginUser.id }
+        )
+        .then(function(res) {
+          console.log(res.data);
+          if (res.data.status == 200) {
+            $("#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();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    },
+    // 快速定位
+    toInfo(id) {
+      this.actives = id;
+      $("body,html").animate(
+        {
+          scrollTop:
+            $("#" + id).offset().top -
+            $(".header")[0].offsetHeight -
+            $(".navBar")[0].offsetHeight
+        },
+        260
+      );
+    }
+  },
+  components: {
+    LoadIng
+  },
+  created() {
+    // seimin
+    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.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+  }
+};
+</script>
+<style lang="less" scoped>
+// i.iconfont.green {
+//   color: #48a843;
+// &::after {
+//   content: "";
+//   width: 0.01rem;
+//   height: 0.4rem;
+//   background: #005395;
+//   position: relative;
+//   display: block;
+//   left: 0.14rem;
+// }
+// }
+.grabSheet {
+  .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;
+  }
+  .box {
+    min-height: 9.7rem;
+    position: relative;
+  }
+  .navBar {
+    width: 100%;
+    height: 0.96rem;
+    line-height: 0.96rem;
+    background-color: #fafafa;
+    font-size: 0.28rem;
+    position: fixed;
+    top: 0.88rem;
+    div {
+      width: 49.99%;
+      text-align: center;
+      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;
+        padding-bottom: 1.3rem;
+        .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;
+        position: absolute;
+        bottom: 0;
+        width: 100%;
+        .cube-btn {
+          background-color: #005395 !important;
+          width: 90%;
+          margin: 0.2rem auto;
+          border-radius: 8px;
+        }
+      }
+    }
+  }
+  .showwrap {
+    width: 75%;
+    text-align: right;
+  }
+}
+</style>

src/views/incidentDetail.vue

@@ -1,470 +0,0 @@
-<template>
-  <div class="incidentDetail">
-    <div class="conentBox">
-      <div class="conent">
-        <!-- <div class="header">处理方案</div> -->
-        <div v-if="model.incident">
-          <div class="label headtop" id="info">报修信息</div>
-          <div class="info">
-              <p>
-                <span>事件单号：</span> 
-                <span>{{model.incident.incidentsign}}</span>
-                <span :class="{ 'fr':true,'btn':true, 'chulizhong':model.incident.state.code=='handler', 'yijiejue':model.incident.state.code=='resolved',  'daipingjia':model.incident.state.code=='close', 'chongxinzhipai':model.incident.state.code=='reassign','daishenhe':model.incident.state.code=='examine', 'daijiedan':(model.incident.state.code=='pending'&&!model.incident.candidateGroups), 'daiqiangdan':(model.incident.state.code=='pending'&&model.incident.candidateGroups)}"
-                >{{model.incident.state.code=='pending'?(!model.incident.candidateGroups?'待接单':'待抢单'):model.incident.state.name}}</span>
-              </p>
-            <p>
-              <span>报修人:</span>
-              <span>{{model.incident.contacts}}</span>
-            </p>
-            <p>
-              <span>人员编号:</span>
-              <span>{{model.incident.requester.account}}</span>
-            </p>
-            <p class="relative">
-              <span>报修电话:</span>
-              <span>{{model.incident.contactsInformation}}</span>
-              <a class="tel" :href="'tel:'+model.incident.contactsInformation"><i class="iconfont dsit-shouji"></i></a>
-            </p>
-            <p>
-              <span>区域地点:</span>
-              <span>{{model.incident.area?model.incident.area.area:''}} {{model.incident.place?model.incident.place.place:''}} {{model.incident.houseNumber||''}}</span>
-            </p>
-            <p>
-              <span>事件主题:</span>
-              <span>{{model.incident.title}}</span>
-            </p>
-            <p>
-              <span>事件分类:</span>
-              <span>{{model.incident.category.category}}</span>
-            </p>
-            <p class="desc relative">
-              <span>事件描述:</span>
-              <span class="grayFont" v-html="model.incident.description"></span>
-              <a class="audio tel" href="javascript:;" v-if="model.incident.callID" @click="showAudio(model.incident.callID)">
-                <i class="iconfont dsit-luyin"></i>
-              </a>
-            </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>
-
-            <p v-if="model.incident.handleResult">
-              <span>处理结果:</span>
-              <span>{{model.incident.handleResult}}</span>
-            </p>
-            <p v-if="model.incident.handleDescription">
-              <span>处理方案:</span>
-              <span>{{model.incident.handleDescription}}</span>
-            </p>
-            <p v-if="model.incident.closecode">
-              <span>结果类型:</span>
-              <span>{{model.incident.closecode.reason}}</span>
-            </p>
-            <p v-if="model.isupreason">
-              <span>升级原因:</span>
-              <span>{{model.isupreason}}</span>
-            </p>
-            <p v-if="model.resignComment">
-              <span>退回原因:</span>
-              <span>{{model.resignComment}}</span>
-            </p>
-
-            <div class="label" id="progress">处理进度</div>
-            <div class="progress">
-              <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, 'dsit-icon_liucheng':item.endTime!='','dsit-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.activityName">【{{item.user?item.user.name:''}}】{{item.activityName}}</p>
-                  </div>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-        <load-ing v-if="!model.incident"></load-ing>
-        <div class="mask" v-if="audioMask" @click="hideAudio()">
-          <audio controls autoplay="autoplay" id="bgMusic">
-            <source :src="audioSrc" type="audio/mpeg">
-          </audio>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import LoadIng from "./../views/loading.vue";
-import http from '../request/http';
-export default {
-  data() {
-    return {
-      loginUser: JSON.parse(localStorage.getItem("loginUser")),
-      selected: 1,
-      id: "",
-      formKey:'',
-      options: [
-        {
-          label: "接单",
-          value: 1
-        },
-        {
-          label: "重新指派",
-          value: 2
-        }
-      ],
-      promptingConent: "",
-      promptingStatus: "",
-      resignComment: "", //重新指派原因
-      item_hides: false,
-      actives: "info",
-      processInstanceId: "",
-      progressInfo: [], //处理进度
-      imgs: [], //图片
-      model: {}, //提交数据
-      audioSrc:'',//音频路径
-      audioMask:false,
-    };
-  },
-  components: {
-    LoadIng
-  },
-  methods: {
-    // 放录音
-    showAudio(){
-      var that=this;
-      if(that.model.incident.callID){
-        http.getIncidentDesAudio(that.model.incident.callID)
-        .then(function(res){
-          that.audioMask=true;
-          that.audioSrc=http.host+'/vox'+res.data.rrpath.substring(18,res.data.rrpath.length);
-        })
-      }
-    },
-    hideAudio(){
-      this.audioMask=false;
-    },
-    //   获取事件数据
-    getParamsData() {
-      var that = this;
-      http.getIncidentDetail(that.processInstanceId)
-        .then(function(res) {
-          console.log(res.data);
-          that.model = res.data.model;
-        });
-    },
-    // 获取图片
-    getImgs() {
-      var that = this;
-      http.getIncidentImgs(that.processInstanceId, {idx:0,sum:3})
-        .then(function(res) {
-          that.imgs =res.data;
-        });
-    },
-    // 获取处理进度
-    getProgressInfo() {
-      var that = this;
-        http.getIncidentProgressInfo(that.processInstanceId)
-        .then(function(res) {
-          that.progressInfo = res.data.data;
-          that.progressInfo.reverse();
-        });
-    },
-  },
-  created() {
-    this.processInstanceId = this.$route.params.data.processInstanceId;
-    this.id = this.$route.params.data.id;
-    // this.formKey=this.$route.params.data.formKey?this.$route.params.data.formKey:'incident_back';
-    this.getParamsData();
-    this.getProgressInfo();
-    this.getImgs();
-  }
-};
-</script>
-<style lang="less" scoped>
-.mask{
-  width: 100%;
-  height: 100%;
-  position: fixed;
-  top: 0;
-  background: rgba(0,0,0,.5);
-  z-index: 999;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-i.iconfont.blue {
-  color: #005395;
-  // &::after {
-  //   content: "";
-  //   width: 0.01rem;
-  //   height: 0.4rem;
-  //   background: #005395;
-  //   position: relative;
-  //   display: block;
-  //   left: 0.14rem;
-  // }
-}
-.incidentDetail {
-  // padding-top: .88rem;
-  box-sizing: border-box;
-  // .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;
-
-    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;
-        }
-      }
-    }
-  }
-
-  .label {
-    background-color: #eeeeee;
-    height: 0.6rem;
-    line-height: 0.58rem;
-    padding-left: 0.2rem;
-    font-size: 0.28rem;
-    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.32rem;
-        overflow: hidden;
-        .head {
-          color: #333;
-          border-bottom: 0.01rem solid #e6e6e6;
-          >p {
-            padding: 0.24rem 0.3rem;
-            i {
-              color: #00559d;
-            }
-          }
-        }
-        >p {
-          line-height: 0.86rem;
-          padding: 0rem 0.24rem;
-          overflow: hidden;
-          border-bottom: 0.01rem solid #e6e6e6;
-          &.relative{
-            position: relative;
-            padding-right: 1rem;
-          }
-          .overflowEllipsis2 {
-            margin-left: 1.96rem;
-          }
-          span:nth-child(1){
-            display: inline-block;
-            width: 1.6rem;
-            color: #333;
-          }
-
-          span:nth-child(2){
-            color: #666;
-            
-          }
-          span:nth-child(3){
-            margin: .23rem 0;
-          }
-          .tel{
-            position: absolute;
-            right: .35rem;
-            top: 0;
-            .iconfont{
-              font-size: .44rem;
-              color: #005395;
-            }
-          }
-          
-        }
-        .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;
-          margin-bottom: 0.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: 20%;
-            }
-            .progress_info_R {
-              float: right;
-              margin-left: 0.09rem;
-              width: 75%;
-              font-size: 0.25rem;
-              .time {
-                i {
-                  margin-left: -0.15rem;
-                  &.dsit-icon_liucheng {
-                    color: #005495;
-                  }
-                  &.dsit-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>

src/views/indes.vue

@@ -31,6 +31,7 @@
         <div
           class="conentBox"
           v-for="item in dataList"
+          :key="item.id"
           @click="toIncidentDetails(item)"
           v-if="!!dataList.length"
         >
@@ -38,7 +39,9 @@
             <div class="center">
               <div>
                 <span class="fl">{{ item.requester.name }}</span>
-                <span class="fr">{{ item.createTime }}</span>
+                <span class="fr">{{
+                  item.createTime | timeFormat("MM-dd HH:mm")
+                }}</span>
               </div>
               <p class="desc">
                 <span
@@ -96,7 +99,6 @@
   </div>
 </template>
 <script>
-import { formatDate } from "./../components/js/date.js";
 import http from "../request/http";
 
 export default {
@@ -147,9 +149,6 @@ export default {
           that.newRapirLoading = false;
           if (res.data.list.length > 0) {
             that.newRapirNoData = false;
-            res.data.list.forEach(v => {
-              v.createTime = formatDate(new Date(v.createTime), "MM-dd hh:mm");
-            });
             that.dataList = res.data.list;
           } else {
             that.newRapirNoData = true;

src/views/order.vue

@@ -0,0 +1,692 @@
+<template>
+  <div class="order">
+    <div class="conentBox">
+      <div class="conent">
+        <div class="header">处理方案</div>
+        <div v-if="model.incident">
+          <div class="navBar">
+            <div
+              class="fl p50"
+              :class="{ p50: model.incident.handlerUser.id != loginUser.id }"
+            >
+              <a
+                :class="{ active: actives == 'info' }"
+                href="javascript:;"
+                @click="toInfo('info')"
+                >事件信息</a
+              >
+            </div>
+            <div
+              class="fl p50"
+              :class="{ p50: model.incident.handlerUser.id != loginUser.id }"
+            >
+              <a
+                :class="{ active: actives == 'progress' }"
+                href="javascript:;"
+                @click="toInfo('progress')"
+                >处理进度</a
+              >
+            </div>
+            <!-- <div
+              class="fl"
+              v-if="model.incident.handlerUser.id == loginUser.id"
+            >
+              <a
+                :class="{ active: actives == 'jd' }"
+                href="javascript:;"
+                @click="toInfo('jd')"
+                >接单</a
+              >
+            </div> -->
+          </div>
+          <div class="label headtop" id="info">事件信息</div>
+
+          <div class="info">
+            <div class="head">
+              <p>
+                <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+                事件单号：{{ model.incident.incidentsign }}
+                <span
+                  :class="{
+                    fr: true,
+                    btn: true,
+                    daijiedan:
+                      model.incident.state.value == 'pending' &&
+                      model.incident.handlerUser &&
+                      !model.incident.candidateGroups,
+                    daiqiangdan:
+                      model.incident.state.value == 'pending' &&
+                      !model.incident.handlerUser &&
+                      model.incident.candidateGroups
+                  }"
+                  >{{
+                    model.incident.state.value == "pending"
+                      ? model.incident.handlerUser &&
+                        !model.incident.candidateGroups
+                        ? "待接单"
+                        : "待抢单"
+                      : model.incident.state.name
+                  }}</span
+                >
+              </p>
+            </div>
+            <p>
+              <span class="fl">事件分类</span>
+              <span class="fr">{{ model.incident.category.category }}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">事件主题</span>
+              <span class="fr">{{model.incident.title}}</span>
+            </p> -->
+            <p class="desc">
+              <span class="fl">事件描述</span>
+              <span
+                class="grayFont fr"
+                v-html="model.incident.description"
+              ></span>
+            </p>
+            <div class="shows" id="shows">
+              <p v-if="valConfig == 2">
+                <span class="fl">报修科室</span>
+                <span class="fr">{{
+                  model.incident.department
+                    ? model.incident.department.dept
+                    : ""
+                }}</span>
+              </p>
+              <p v-if="valConfig == 1">
+                <span class="fl">报修人</span>
+                <span class="fr">{{ model.incident.requester.name }}</span>
+              </p>
+              <p v-if="valConfig == 2">
+                <span class="fl">联系人</span>
+                <span class="fr">{{ model.incident.contacts }}</span>
+              </p>
+              <p>
+                <span class="fl">联系电话</span>
+                <span
+                  class="fr"
+                  v-if="!model.incident.contactsInformation"
+                ></span>
+                <span class="fr" v-if="model.incident.contactsInformation"
+                  ><a :href="'tel:' + model.incident.contactsInformation"
+                    ><i class="iconfont icon-shouji"></i
+                    >{{ model.incident.contactsInformation }}</a
+                  ></span
+                >
+              </p>
+              <p>
+                <span class="fl">联系地址</span>
+                <span class="fr">{{ model.incident.houseNumber || "" }}</span>
+              </p>
+              <p class="boeder_B">
+                <span class="fl">事件来源</span>
+                <span class="fr">{{ model.incident.source.name }}</span>
+              </p>
+              <!-- <p>
+                <span class="fl">影响度</span>
+                <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+              </p>
+              <p>
+                <span class="fl">紧急度</span>
+                <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+              </p> -->
+              <p>
+                <span class="fl">优先级</span>
+                <span class="fr">{{
+                  model.incident.priority ? model.incident.priority.name : ""
+                }}</span>
+              </p>
+              <p>
+                <span class="fl">逾期响应时间</span>
+                <span class="fr">{{ model.incident.overdueResponseDate }}</span>
+              </p>
+              <p>
+                <span class="fl">逾期解决时间</span>
+                <span class="fr">{{ model.incident.overdueTime }}</span>
+              </p>
+              <p>
+                <span class="fl">区域</span>
+                <span class="fr">{{
+                  model.incident.place ? model.incident.place.area.area : "--"
+                }}</span>
+              </p>
+              <p>
+                <span class="fl">地点</span>
+                <span class="fr">{{
+                  model.incident.place ? model.incident.place.place : "--"
+                }}</span>
+              </p>
+              <!-- <p v-if="model.incident.synergeticReason">
+                <span class="fl" >协同原因</span>
+                <span class="fr">{{model.incident.synergeticReason}}</span>
+              </p>
+              <p v-if="model.isupreason">
+                <span class="fl">升级原因</span>
+                <span class="fr">{{model.isupreason}}</span>
+              </p>
+              <p v-if="model.transferReason">
+                <span class="fl">转派原因</span>
+                <span class="fr" >{{model.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="model.incident.handlerUser.id==loginUser.id">
+              <div class="label" id="jd">接单</div>
+              <cube-radio-group
+                v-model="selected"
+                :options="options"
+                position="right"
+                :hollow-style="true"
+              />
+
+              <div class="txtLabel" v-if="selected==2">
+                <div class="txt fl">
+                  <span style="color:red;">*</span> 重新指派理由:
+                </div>
+                <cube-textarea class="fl" v-model="resignComment" placeholder="重新指派理由"></cube-textarea>
+              </div>
+              <cube-form-group class="sub">
+                <cube-button type="submit" @click="subVali()">{{selected==1?'接单':'重新指派'}}</cube-button>
+              </cube-form-group>
+            </div> -->
+          </div>
+        </div>
+        <load-ing v-if="!model.incident"></load-ing>
+        <promp-ting
+          :conents="promptingConent"
+          :status="promptingStatus"
+        ></promp-ting>
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+import PrompTing from "./../views/prompting.vue";
+export default {
+  data() {
+    return {
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      selected: 1,
+      id: "",
+      options: [
+        {
+          label: "接单",
+          value: 1
+        },
+        {
+          label: "重新指派",
+          value: 2
+        }
+      ],
+      promptingConent: "",
+      promptingStatus: "",
+      resignComment: "", //重新指派原因
+      item_hides: false,
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {}, //提交数据
+      pro_hides: false //展开/收起处理进度
+    };
+  },
+  components: {
+    LoadIng,
+    PrompTing
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/receiveform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id +
+            "/" +
+            that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          //seimin
+          localStorage.setItem("modelData", JSON.stringify(that.model));
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    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;
+    },
+    //数据提交baba
+    subVali() {
+      var that = this;
+      delete that.model.handlerCode;
+      that.model.handler_code = "resolve";
+      that.model.incident.assignee = that.loginUser.id;
+      if (that.selected == 1) {
+        that.model.receive_code = "handler";
+        that.model.loginUser = that.loginUser;
+        that.model.msgflag = "接单";
+        that.model.submit = "接单";
+      } else if (that.selected == 2) {
+        that.model.msgflag = "重新指派";
+        that.model.submit = "重新指派";
+        that.model.receive_code = "transferment";
+        that.model.resignComment = that.resignComment;
+        if (!that.resignComment) {
+          $("#fade").fadeIn();
+          that.promptingConent = "提交失败,请填写必填信息!";
+          that.promptingStatus = false;
+          setTimeout(function() {
+            $("#fade").fadeOut();
+          }, 2000);
+          return;
+        }
+      }
+      console.log(that.model);
+      that.$http
+        .post(
+          "service/bpm/bpm/completeTask/" +
+            that.model.incident.taskId +
+            "/" +
+            that.loginUser.id,
+          that.model
+        )
+        .then(function(res) {
+          console.log(res.data);
+          if (res.data) {
+            $("#fade").fadeIn();
+            that.promptingConent =
+              that.selected == 1 ? "恭喜您,接单成功!" : "恭喜您,重新指派成功!";
+            that.promptingStatus = true;
+            that.dialog = that
+              .$createDialog({
+                type: "alert",
+                title: that.selected == 1 ? "接单成功" : "重新指派成功",
+                content: "点击返回首页",
+                icon: "cubeic-right",
+                onConfirm: (e, promptValue) => {
+                  that.$router.push({ path: "/main" });
+                }
+              })
+              .show();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    },
+    // 快速定位
+    toInfo(id) {
+      this.actives = id;
+      $("body,html").animate(
+        {
+          scrollTop:
+            $("#" + id).offset().top -
+            $(".header")[0].offsetHeight -
+            $(".navBar")[0].offsetHeight
+        },
+        260
+      );
+    }
+  },
+  created() {
+    // seimin
+    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.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+  }
+};
+</script>
+<style lang="less" scoped>
+i.iconfont.blue {
+  color: #005395;
+  // &::after {
+  //   content: "";
+  //   width: 0.01rem;
+  //   height: 0.4rem;
+  //   background: #005395;
+  //   position: relative;
+  //   display: block;
+  //   left: 0.14rem;
+  // }
+}
+.order {
+  .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;
+
+    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>

src/views/solved.vue

@@ -0,0 +1,795 @@
+<template>
+  <div class="solved">
+    <div class="conentBox">
+      <div class="header">处理方案</div>
+      <div v-if="model.incident" class="conent">
+        <div class="navBar">
+          <div class="fl">
+            <a
+              :class="{ active: actives == 'info' }"
+              href="javascript:;"
+              @click="toInfo('info')"
+              >事件信息</a
+            >
+          </div>
+          <div class="fl">
+            <a
+              :class="{ active: actives == 'handlerInfo' }"
+              href="javascript:;"
+              @click="toInfo('handlerInfo')"
+              >处理信息</a
+            >
+          </div>
+          <div class="fl">
+            <a
+              :class="{ active: actives == 'progress' }"
+              href="javascript:;"
+              @click="toInfo('progress')"
+              >处理进度</a
+            >
+          </div>
+        </div>
+
+        <div class="info">
+          <div class="label headtop" id="info">事件信息</div>
+          <div class="head">
+            <p>
+              <i class="iconfont icon-zuixinbaoxiu newPapir"></i>
+              事件编号：{{ model.incident.incidentsign }}
+              <span class="fr btn yijiejue">{{
+                model.incident.state.name
+              }}</span>
+            </p>
+          </div>
+          <p>
+            <span class="fl">事件分类</span>
+            <span class="fr">{{ model.incident.category.category }}</span>
+          </p>
+          <!-- <p>
+            <span class="fl">事件主题</span>
+            <span class="fr">{{model.incident.title}}</span>
+          </p> -->
+          <p class="desc">
+            <span class="fl">事件描述</span>
+            <span
+              class="grayFont fr "
+              v-html="model.incident.description"
+            ></span>
+          </p>
+          <div class="shows" id="shows">
+            <p v-if="valConfig == 2">
+              <span class="fl">报修科室</span>
+              <span class="fr">{{
+                model.incident.department ? model.incident.department.dept : ""
+              }}</span>
+            </p>
+            <p v-if="valConfig == 1">
+              <span class="fl">报修人</span>
+              <span class="fr">{{ model.incident.requester.name }}</span>
+            </p>
+            <p v-if="valConfig == 2">
+              <span class="fl">联系人</span>
+              <span class="fr">{{ model.incident.contacts }}</span>
+            </p>
+            <p>
+              <span class="fl">联系电话</span>
+              <span
+                class="fr"
+                v-if="!model.incident.contactsInformation"
+              ></span>
+              <span class="fr" v-if="model.incident.contactsInformation"
+                ><a :href="'tel:' + model.incident.contactsInformation"
+                  ><i class="iconfont icon-shouji"></i
+                  >{{ model.incident.contactsInformation }}</a
+                ></span
+              >
+            </p>
+            <p>
+              <span class="fl">联系地址</span>
+              <span class="fr">{{ model.incident.houseNumber || "" }}</span>
+            </p>
+            <p class="boeder_B">
+              <span class="fl">事件来源</span>
+              <span class="fr">{{ model.incident.source.name }}</span>
+            </p>
+            <!-- <p>
+              <span class="fl">影响度</span>
+              <span class="fr">{{model.incident.influence?model.incident.influence.name:''}}</span>
+            </p>
+            <p>
+              <span class="fl">紧急度</span>
+              <span class="fr">{{model.incident.emergency?model.incident.emergency.name:''}}</span>
+            </p> -->
+            <p>
+              <span class="fl">优先级</span>
+              <span class="fr">{{
+                model.incident.priority ? model.incident.priority.name : ""
+              }}</span>
+            </p>
+            <p>
+              <span class="fl">逾期响应时间</span>
+              <span class="fr">{{ model.incident.overdueResponseDate }}</span>
+            </p>
+            <p>
+              <span class="fl">逾期解决时间</span>
+              <span class="fr">{{ model.incident.overdueTime }}</span>
+            </p>
+            <p>
+              <span class="fl">区域</span>
+              <span class="fr">{{
+                model.incident.place ? model.incident.place.area.area : "--"
+              }}</span>
+            </p>
+            <p>
+              <span class="fl">地点</span>
+              <span class="fr">{{
+                model.incident.place ? model.incident.place.place : "--"
+              }}</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="handlerInfo">处理信息</div>
+          <p>
+            <span class="fl">处理人</span>
+            <span class="fr">{{
+              model.incident.acceptUser ? model.incident.acceptUser.name : ""
+            }}</span>
+          </p>
+          <p>
+            <span class="fl">联系电话</span>
+            <span class="fr" v-if="!model.incident.contactsInformation"></span>
+            <span class="fr" v-if="model.incident.contactsInformation"
+              ><a :href="'tel:' + model.incident.contactsInformation"
+                ><i class="iconfont icon-shouji"></i
+                >{{ model.incident.contactsInformation }}</a
+              ></span
+            >
+          </p>
+          <p>
+            <span class="fl">处理方式</span>
+            <span class="fr showwrap">{{
+              model.incident.handleCategory
+                ? model.incident.handleCategory.name
+                : ""
+            }}</span>
+          </p>
+          <p>
+            <span class="fl">关闭代码</span>
+            <span class="fr">{{
+              model.incident.closecode ? model.incident.closecode.name : ""
+            }}</span>
+          </p>
+          <p class="desc">
+            <span class="fl">处理方案</span>
+            <span
+              class="fr grayFont"
+              v-html="model.incident.handleDescription"
+            ></span>
+          </p>
+          <!-- <p>
+            <span class="fl" v-if="model.incident.synergeticReason">协同对象</span>
+            <span class="fl" v-else-if="model.isupreason">升级对象</span>
+            <span class="fl" v-else-if="model.transferReason">转派对象</span>
+            <span class="fr">{{model.incident.handlerUser?model.incident.handlerUser.name:''}}</span>
+          </p>
+              <p v-if="model.incident.synergeticReason">
+                <span class="fl" >协同原因</span>
+                <span class="fr">{{model.incident.synergeticReason}}</span>
+              </p>
+              <p v-if="model.isupreason">
+                <span class="fl">升级原因</span>
+                <span class="fr">{{model.isupreason}}</span>
+              </p>
+              <p v-if="model.transferReason">
+                <span class="fl">转派原因</span>
+                <span class="fr" >{{model.transferReason}}</span>
+              </p> -->
+
+          <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
+            class="form"
+            v-if="model.incident.handlerUser.id == loginUser.id"
+          >
+            <div class="txtLabel">
+              <div class="txt fl handler">
+                <span style="color:red;">*</span>是否已解决：
+              </div>
+              <cube-select
+                class="selectGroup fl"
+                v-model="isclose"
+                :options="iscloseArr"
+              ></cube-select>
+            </div>
+            <div class="txtLabel">
+              <div class="txt fl">
+                <span style="color:red;">*</span> 结果类型:
+              </div>
+              <cube-select
+                class="selectGroup fl"
+                v-model="handleResult"
+                :options="handleResultArr"
+              ></cube-select>
+            </div>
+            <div class="txtLabel">
+              <div class="txt fl">满意度评价:</div>
+              <cube-select
+                class="selectGroup fl"
+                v-model="degree"
+                :options="degreeArr"
+              ></cube-select>
+            </div>
+            <div class="txtLabel">
+              <div class="txt fl">回访备注:</div>
+              <cube-input v-model="model.incident.visitRemarks"></cube-input>
+            </div>
+            <cube-form-group class="sub">
+              <cube-button type="submit" @click="subVali()">提交</cube-button>
+            </cube-form-group>
+          </div> -->
+        </div>
+      </div>
+      <load-ing v-if="!model.incident"></load-ing>
+    </div>
+  </div>
+</template>
+<script>
+import LoadIng from "./../views/loading.vue";
+export default {
+  data() {
+    return {
+      id: "",
+      loginUser: JSON.parse(localStorage.getItem("loginUser")),
+      valConfig: JSON.parse(localStorage.getItem("valConfig")) - 0, //报修主体
+      selected: 1,
+      isclose: "close", //是否已解决
+      iscloseArr: [
+        {
+          text: "已解决",
+          value: "close"
+        },
+        {
+          text: "未解决",
+          value: "notsolved"
+        }
+      ],
+      handleResult: "", //结果类型
+      handleResultArr: [], //结果类型
+      degree: "",
+      degreeArr: [],
+      visitRemarks: "", //回访备注
+      item_hides: false,
+      item_hides1: false,
+      pro_hides: false, //展开/收起处理进度
+      actives: "info",
+      processInstanceId: "",
+      progressInfo: [], //处理进度
+      imgs: [], //图片
+      model: {} //提交数据
+    };
+  },
+  components: {
+    LoadIng
+  },
+  methods: {
+    //   获取事件数据
+    getParamsData() {
+      var that = this;
+      that.$http
+        .get(
+          "/service/form/renderForm/closeform/" +
+            that.processInstanceId +
+            "/" +
+            that.loginUser.id +
+            "/" +
+            that.id,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.model = res.data.model;
+          that.model.msgflag = "已解决";
+          //seimin
+          localStorage.setItem("modelData", JSON.stringify(that.model));
+        });
+    },
+    // 获取图片
+    getImgs() {
+      var that = this;
+      that.$http
+        .get(
+          "service/common/common/listAttachment/incident/" +
+            that.processInstanceId,
+          {}
+        )
+        .then(function(res) {
+          console.log(res.data);
+          that.imgs = res.data.data.splice(0, 3);
+          console.log(that.imgs);
+        });
+    },
+    // 获取处理进度
+    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();
+        });
+    },
+    // 获取结果类型
+    getHandlerRes() {
+      var that = this;
+      that.$http
+        .post("/service/common/common/getDictionary", {
+          type: "list",
+          key: "incident_handleresult"
+        })
+        .then(function(res) {
+          console.log(res.data);
+          // that.handleResultArr = res.data;
+          res.data.forEach(function(v, i) {
+            that.handleResultArr.push({
+              text: v.name,
+              value: v.id
+            });
+          });
+        });
+    },
+    // 获取满意度评价
+    getDegree() {
+      var that = this;
+      that.$http
+        .post("/service/common/common/getDictionary", {
+          type: "list",
+          key: "incident_degree"
+        })
+        .then(function(res) {
+          console.log(res.data);
+          // that.degreeArr = res.data;
+          res.data.forEach(function(v, i) {
+            that.degreeArr.push({
+              text: v.name,
+              value: v.id
+            });
+          });
+        });
+    },
+    //隐藏显示详情
+    hides() {
+      this.item_hides = !this.item_hides;
+      $("#shows").slideToggle();
+    },
+    //隐藏显示详情
+    hides1() {
+      this.item_hides1 = !this.item_hides1;
+      $("#shows1").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
+      );
+    },
+    // 提交
+    subVali() {
+      var that = this;
+      delete that.model.handlerCode;
+      that.model.handler_code = "resolve";
+      that.model.isclose = that.isclose;
+      if (that.model.isclose == "close") {
+        delete that.model.receive_code;
+      }
+      that.model.incident.handleResult = { id: that.handleResult };
+      that.model.loginUser = that.loginUser;
+      if (that.degree) {
+        that.model.incident.degree = { id: that.degree };
+      }
+
+      console.log(that.model);
+      if (!that.model.incident.handleResult) {
+        $("#fade").fadeIn();
+        that.promptingConent = "提交失败,请填写必填信息!";
+        that.promptingStatus = false;
+        setTimeout(function() {
+          $("#fade").fadeOut();
+        }, 2000);
+      }
+
+      that.$http
+        .post(
+          "service/bpm/bpm/completeTask/" +
+            that.model.incident.taskId +
+            "/" +
+            that.loginUser.id,
+          that.model
+        )
+        .then(function(res) {
+          if (res.data.status == 200) {
+            $("#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();
+            setTimeout(function() {
+              $("#fade").fadeOut();
+            }, 2000);
+          }
+        });
+    }
+  },
+  created() {
+    // seimin
+    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.getParamsData();
+    this.getProgressInfo();
+    this.getImgs();
+    this.getHandlerRes();
+    this.getDegree();
+  }
+};
+</script>
+<style lang="less" scoped>
+i.iconfont {
+  &.blue {
+    color: #005395;
+    // &::after {
+    //   content: "";
+    //   width: 0.01rem;
+    //   height: 0.4rem;
+    //   background: #005395;
+    //   position: relative;
+    //   display: block;
+    //   left: 0.14rem;
+    // }
+  }
+  &.blue1 {
+    color: #005395;
+  }
+}
+.solved {
+  .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;
+    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;
+    }
+  }
+  .txtLabel {
+    width: 100%;
+    overflow: hidden;
+    padding: 0.32rem 0.24rem 0.32rem 0.32rem;
+    .txt {
+      width: 25%;
+      color: #666;
+      &.handler {
+        width: 40%;
+      }
+    }
+    .selectGroup {
+      width: 62%;
+    }
+    .cube-input {
+      width: 62%;
+    }
+  }
+  .conentBox {
+    width: 100%;
+    .conent {
+      font-size: 0.32rem;
+      font-weight: 400;
+      line-height: 0.45rem;
+      // border-bottom: 0.16rem solid #e5e5e5;
+
+      .shows {
+        display: none;
+      }
+
+      .shows1 {
+        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>

src/views/wxChartDetail.vue

@@ -6,19 +6,39 @@
         <div class="inf" v-if="model">
           <div class="label headtop" id="info">报修信息</div>
           <div class="info">
-              <p>
-                <span>报修人：</span>
-                <span>{{model.requester.name}}</span>
-                <span :class="{'btn':true,'fr':true,'bushouli':model.state=='不受理','yizhuanhuan':model.state=='已转换','weizhuanhuan':model.state=='未转换','yijiejue':model.state=='已解决','chulizhong':model.state=='处理中','daipingjia':model.state=='待评价'}">{{model.state}}</span>
+            <p>
+              <span>报修人：</span>
+              <span>{{ model.requester.name }}</span>
+              <!-- yizhuanhuan: model.incidentState.name == '已转换', -->
+              <span
+                :class="{
+                  btn: true,
+                  fr: true,
+                  weizhuanhuan: model.incidentState.value == 0,
+                  bushouli: model.incidentState.value == 1,
+                  chulizhong: model.incidentState.value == 2,
+                  daipingjia: model.incidentState.value == 3,
+                  yijiejue: model.incidentState.value == 4
+                }"
+                >{{ model.incidentState.name }}</span
+              >
             </p>
             <p class="relative">
               <span>报修电话:</span>
-              <span>{{model.requester.mphone}}</span>
-              <a class="tel" :href="'tel:'+model.requester.mphone"><i class="iconfont dsit-shouji"></i></a>
+              <span v-if="model.requester"
+                ><a :href="'tel:' + model.requester.mphone"
+                  ><i class="iconfont dsit-shouji"></i
+                  >{{ model.requester.mphone }}</a
+                ></span
+              >
             </p>
             <p>
               <span>报修地址:</span>
-              <span>{{model.area?model.area.area:''}} {{model.place?model.place.place:''}} {{model.houseNumber||''}}</span>
+              <span
+                >{{ model.area ? model.area.area : "" }}
+                {{ model.place ? model.place.place : "" }}
+                {{ model.houseNumber || "" }}</span
+              >
             </p>
             <p class="desc">
               <span>报修描述:</span>
@@ -27,57 +47,86 @@
             <div class="label" v-if="imgs.length">报修图片</div>
             <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='baseURL+"/service/common/common/downloadAttachment/"+img.token' v-for="(img, index) in imgs" class="imgs">
+                <img
+                  v-if="
+                    img.suffix == 'jpeg' ||
+                      img.suffix == 'jpg' ||
+                      img.suffix == 'gif' ||
+                      img.suffix == 'png' ||
+                      img.suffix == 'svg' ||
+                      img.suffix == 'pdf'
+                  "
+                  :src="
+                    baseURL +
+                      '/service/common/common/downloadAttachment/' +
+                      img.token
+                  "
+                  v-for="(img, index) in imgs"
+                  class="imgs"
+                />
                 <p v-else>
-                  <a :href='baseURL+"/service/common/common/downloadAttachment/"+img.token'>{{img.name}}</a>
+                  <a
+                    :href="
+                      baseURL +
+                        '/service/common/common/downloadAttachment/' +
+                        img.token
+                    "
+                    >{{ img.name }}</a
+                  >
                 </p>
               </div>
             </div>
-            <p class="lastP" v-if="model.state=='不受理'">
+            <p class="lastP" v-if="model.incidentState.value == 1">
               <span>不受理原因:</span>
-              <span>{{model.rejectRemark||''}}</span>
+              <span>{{ model.rejectRemark || "" }}</span>
             </p>
           </div>
         </div>
-          <div v-if="model.state=='未转换'" class="btnBox">
-            <cube-button @click="showPicker()">操作</cube-button>
-          </div>
+        <div v-if="model.incidentState.value == 0" class="btnBox">
+          <cube-button @click="showPicker()">操作</cube-button>
+        </div>
         <load-ing v-if="!model"></load-ing>
       </div>
     </div>
-    <div class="dialog" v-if="dialog&&model.state=='未转换'" >
-        <div class="header">报障详情</div>
-        <div class="conent">
-            <div class="label">不受理原因</div>
-            <div class="textarea">
-                <div  class="textareacon" ref="textCon" placeholder="请填写不受理原因" @input="cons()" contenteditable="true"></div>
-            </div>
-            <div class="bottom">
-                <cube-button @click="submit()">确定</cube-button>
-                <cube-button @click="dialog=false;">取消</cube-button>
-            </div>
+    <div class="dialog" v-if="dialog && model.incidentState.value == 0">
+      <div class="header">报障详情</div>
+      <div class="conent">
+        <div class="label">不受理原因</div>
+        <div class="textarea">
+          <div
+            class="textareacon"
+            ref="textCon"
+            placeholder="请填写不受理原因"
+            @input="cons()"
+            contenteditable="true"
+          ></div>
         </div>
+        <div class="bottom">
+          <cube-button @click="submit()">确定</cube-button>
+          <cube-button @click="dialog = false">取消</cube-button>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 <script>
 import LoadIng from "./../views/loading.vue";
-import http from "../request/http"
+import http from "../request/http";
 export default {
   data() {
     return {
       loginUser: JSON.parse(localStorage.getItem("loginUser")),
       promptingConent: "",
       promptingStatus: "",
-      baseURL:http.host,
+      baseURL: http.host,
       imgs: [], //图片
-      model: {} ,//报障数据
-      rejectRemark:'',//不受理原因
-      dialog:false,
+      model: {}, //报障数据
+      rejectRemark: "", //不受理原因
+      dialog: false,
       column1: [
-            { text: '生成事件', value: '0'},
-            { text: '不受理', value: '1' },
-        ]
+        { text: "生成事件", value: "0" },
+        { text: "不受理", value: "1" }
+      ]
     };
   },
   components: {
@@ -87,65 +136,65 @@ export default {
     // 获取图片
     getImgs() {
       var that = this;
-      http.getIncidentWebImgs(that.model.id)
-        .then(function(res) {
-          that.imgs =res.data.data.length? res.data.data.splice(0, 3):[];
-        });
+      http.getIncidentWebImgs(that.model.id).then(function(res) {
+        that.imgs = res.data.data.length ? res.data.data.splice(0, 3) : [];
+      });
     },
     showPicker() {
       if (!this.picker) {
         this.picker = this.$createPicker({
-          title: '',
+          title: "",
           data: [this.column1],
           onSelect: this.selectHandle,
           onCancel: this.cancelHandle
-        })
+        });
       }
-      this.picker.show()
+      this.picker.show();
     },
     selectHandle(selectedVal, selectedIndex, selectedText) {
-      if(selectedVal==0){
+      if (selectedVal == 0) {
         //   生成事件
         this.$router.push({
-            name:'NewIncident',
-            params:{
-                data:this.model,
-                id:this.model.id
-            }
-        })
-      }else if(selectedVal==1){
+          name: "NewIncident",
+          params: {
+            data: this.model,
+            id: this.model.id
+          }
+        });
+      } else if (selectedVal == 1) {
         //   不受理
-          this.dialog=true;
+        this.dialog = true;
       }
     },
     cancelHandle() {},
     // 输入不受理原因
-    cons(){
-        this.rejectRemark=this.$refs.textCon.innerHTML;
+    cons() {
+      this.rejectRemark = this.$refs.textCon.innerHTML;
     },
     // 提交不受理原因
-    submit(){
-      var that=this;
-      http.submitWebRemark(that.model.id,{rejectRemark:that.rejectRemark})
-      .then(function(res) {
-        if(res.data.state==200){
+    submit() {
+      var that = this;
+      http
+        .submitWebRemark(that.model.id, { rejectRemark: that.rejectRemark })
+        .then(function(res) {
+          if (res.data.state == 200) {
             that.dialog = that
-            .$createDialog({
-              type: "alert",
-              title: "提交成功",
-              content: "点击返回首页",
-              icon: "cubeic-right",
-              onConfirm: (e, promptValue) => {
-                that.$router.push({ path: "/main" });
-              }
-            })
-            .show();
-        }
-      });
+              .$createDialog({
+                type: "alert",
+                title: "提交成功",
+                content: "点击返回首页",
+                icon: "cubeic-right",
+                onConfirm: (e, promptValue) => {
+                  that.$router.push({ path: "/main" });
+                }
+              })
+              .show();
+          }
+        });
     }
   },
   created() {
-    this.model=this.$route.params.data;
+    this.model = this.$route.params.data;
     this.getImgs();
   }
 };
@@ -234,7 +283,7 @@ i.iconfont.blue {
       font-weight: 400;
       line-height: 0.45rem;
       // border-bottom: 0.16rem solid #e5e5e5;
-      .inf{
+      .inf {
         min-height: 11rem;
       }
       .shows {
@@ -269,61 +318,57 @@ i.iconfont.blue {
         .head {
           color: #333;
           border-bottom: 0.01rem solid #e6e6e6;
-          >p {
+          > p {
             padding: 0.24rem 0.3rem;
             i {
               color: #00559d;
             }
-
           }
-
         }
-        >p {
+        > p {
           line-height: 0.68rem;
           padding: 0.1rem 0.24rem;
           overflow: hidden;
           border-bottom: 0.01rem solid #e6e6e6;
-          &.lastP{
+          &.lastP {
             border-bottom: none;
             display: inline-block;
             width: 100%;
             min-height: 2rem;
             box-sizing: border-box;
           }
-          &.relative{
+          &.relative {
             position: relative;
             padding-right: 1rem;
           }
           .overflowEllipsis2 {
             margin-left: 1.96rem;
           }
-          span:nth-child(1){
+          span:nth-child(1) {
             display: inline-block;
             width: 1.7rem;
             color: #333;
           }
 
-          span:nth-child(2){
+          span:nth-child(2) {
             color: #666;
-
           }
-          span:nth-child(3){
-            margin: .13rem 0;
+          span:nth-child(3) {
+            margin: 0.13rem 0;
           }
-          .tel{
+          .tel {
             position: absolute;
-            right: .35rem;
+            right: 0.35rem;
             top: 0;
-            .iconfont{
-              font-size: .44rem;
+            .iconfont {
+              font-size: 0.44rem;
               color: #005395;
             }
           }
-
         }
         .imgs-container {
-            padding: .24rem 0;
-            border-bottom: 0.01rem solid #e6e6e6;
+          padding: 0.24rem 0;
+          border-bottom: 0.01rem solid #e6e6e6;
           a {
             color: #03c !important;
             &:visited {
@@ -398,16 +443,16 @@ i.iconfont.blue {
           }
         }
       }
-      .btnBox{
-            width: 100%;
-            padding: .24rem;
-            box-sizing: border-box;
-            background: #eee;
-        .cube-btn{
-            width: 100%;
-            height: 100%;
-            border-radius: .1rem;
-            background: #01559d;
+      .btnBox {
+        width: 100%;
+        padding: 0.24rem;
+        box-sizing: border-box;
+        background: #eee;
+        .cube-btn {
+          width: 100%;
+          height: 100%;
+          border-radius: 0.1rem;
+          background: #01559d;
         }
       }
       .txtLabel {
@@ -433,60 +478,59 @@ i.iconfont.blue {
       }
     }
     .showwrap {
-        width: 75%;
-        text-align: right;
+      width: 75%;
+      text-align: right;
     }
   }
-  .dialog{
+  .dialog {
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    background: #eee;
+    z-index: 9;
+    .conent {
+      padding-top: 0.88rem;
+      .textarea {
         width: 100%;
-        height: 100%;
-        position: fixed;
-        top: 0;
-        background: #eee;
-        z-index: 9;
-        .conent{
-            padding-top: .88rem;
-            .textarea{
-                width: 100%;
-                min-height: 3.15rem;
-                .textareacon{
-                    background: #fff;
-                    min-height: 3.15rem;
-                    padding: .24rem;
-                    box-sizing: border-box;
-                    font-size: .32rem;
-                    color: #666;
-                }
-                .textareacon:empty:before{
-                    content: attr(placeholder);
-                    color:#bbb;
-                }
-                .textareacon:focus{
-                    outline: none;
-                }
-                .textareacon:focus:before{
-                    content:none;
-                }
-            }
-            .bottom{
-                width: 100%;
-                padding: .24rem;
-                box-sizing: border-box;
-                display: flex;
-                button{
-                    margin: .1rem;
-                    &:nth-child(1){
-                        background-color: #01559d;
-                    }
-                    &:nth-child(2){
-                        background-color: #fff;
-                        border: 1px solid #ccc;
-                        color: #333;
-                    }
-                }
-            }
+        min-height: 3.15rem;
+        .textareacon {
+          background: #fff;
+          min-height: 3.15rem;
+          padding: 0.24rem;
+          box-sizing: border-box;
+          font-size: 0.32rem;
+          color: #666;
+        }
+        .textareacon:empty:before {
+          content: attr(placeholder);
+          color: #bbb;
+        }
+        .textareacon:focus {
+          outline: none;
         }
+        .textareacon:focus:before {
+          content: none;
+        }
+      }
+      .bottom {
+        width: 100%;
+        padding: 0.24rem;
+        box-sizing: border-box;
+        display: flex;
+        button {
+          margin: 0.1rem;
+          &:nth-child(1) {
+            background-color: #01559d;
+          }
+          &:nth-child(2) {
+            background-color: #fff;
+            border: 1px solid #ccc;
+            color: #333;
+          }
+        }
+      }
+    }
   }
-
 }
 </style>

src/views/wxChartList.vue

@@ -21,6 +21,7 @@
               <div
                 class="conent"
                 v-for="item in items"
+                :key="item.id"
                 @click="toIncidentDetails(item)"
               >
                 <div class="center">
@@ -33,36 +34,31 @@
                       class="grayFont overflowEllipsis2"
                       v-html="item.incidentDescription"
                     ></span>
+                    <!-- yizhuanhuan: item.incidentState.name == '已转换', -->
                     <span
                       :class="{
                         btn: true,
-                        bushouli: item.state == '不受理',
-                        yizhuanhuan: item.state == '已转换',
-                        weizhuanhuan: item.state == '未转换',
-                        yijiejue: item.state == '已解决',
-                        chulizhong: item.state == '处理中',
-                        daipingjia: item.state == '待评价'
+                        weizhuanhuan: item.incidentState.value == 0,
+                        bushouli: item.incidentState.value == 1,
+                        chulizhong: item.incidentState.value == 2,
+                        daipingjia: item.incidentState.value == 3,
+                        yijiejue: item.incidentState.value == 4
                       }"
-                      >{{ item.state }}</span
+                      >{{ item.incidentState.name }}</span
                     >
                   </p>
                   <p>
                     <span class="fl">区域地点：</span>
-                    <span class="grayFont"
-                      >{{ item.place ? item.place.place : "" }}
-                      {{
-                        item.place
-                          ? item.place.areas
-                            ? item.place.areas.area
-                            : ""
-                          : ""
-                      }}</span
-                    >
+                    <span class="grayFont">{{
+                      item.place ? item.place.area.area + item.place.place : ""
+                    }}</span>
                   </p>
                 </div>
                 <div class="bottom">
                   <span class="fl">报修人: {{ item.requester.name }}</span>
-                  <span class="fr">{{ item.createTime }}</span>
+                  <span class="fr">{{
+                    item.createTime | timeFormat("MM-dd HH:mm")
+                  }}</span>
                 </div>
               </div>
               <div class="wushuju" v-show="wushuju">
@@ -134,22 +130,26 @@ export default {
       searchsType: [
         {
           text: "全部",
-          value: ""
+          value: 0
         },
         {
           text: "未转换",
-          value: "未转换"
+          value: 1592
         },
         {
-          text: "已转换",
-          value: "已转换"
+          text: "处理中",
+          value: 1594
         },
         {
           text: "不受理",
-          value: "不受理"
+          value: 1593
+        },
+        {
+          text: "待评价",
+          value: 1595
         }
       ],
-      searchType: "未转换",
+      searchType: 1592,
       sum: 10,
       idx: 0,
       stateClass: "",
@@ -216,21 +216,22 @@ export default {
 
     getData() {
       var that = this;
-      http
-        .bpmFetchDataList("wxincident", {
-          wxincident: { state: that.searchType },
-          idx: that.idx,
-          sum: that.sum
-        })
-        .then(function(res) {
-          if (res.data.list && res.data.list.length > 0) {
-            that.wushuju = false;
-            that.items = that.items.concat(res.data.list);
-          } else if (res.data.list.length <= 0) {
-            that.wushuju = true;
-          }
-          that.loadShow = false;
-        });
+      let postData = {
+        idx: that.idx,
+        sum: that.sum
+      };
+      if (that.searchType) {
+        postData.wxincident = { incidentState: { id: that.searchType } };
+      }
+      http.bpmFetchDataList("wxincident", postData).then(function(res) {
+        if (res.data.list && res.data.list.length > 0) {
+          that.wushuju = false;
+          that.items = that.items.concat(res.data.list);
+        } else if (res.data.list.length <= 0) {
+          that.wushuju = true;
+        }
+        that.loadShow = false;
+      });
     },
     onPullingDown() {
       var that = this;