zfire-newmall-admin/src/views/workOrder/workOrderPool/detailModule/workOrderInfo/index.vue

<template>
  <zj-page-container v-if="orderInfo">
    <zj-page-fill class="neibuview">
      <zj-form-container ref="formRef" :form-data="orderInfo" :form-rules="formRules" :form-attributes="{ size: 'mini' }">
        <!-- 派工信息 创建不需要 -->
        <zj-form-module v-if="id" title="派工信息" label-width="90px" :form-data="orderInfo" :form-items="dispatchInfo">
          <div slot="internal-bottom">
            <copy-info text="复制工单信息" :info="dispatchInfo" :order-info="orderInfo" />
          </div>
          <div slot="right" style="width: 55%; position: relative">
            <div class="pgxxTable">
              <zj-table :columns="logColumns" :table-data="logList"
                :table-attributes="{ height: '100%', border: true }" />
            </div>
          </div>
        </zj-form-module>
        <!-- 基本信息 -->
        <zj-form-module title="基本信息" :form-data="orderInfo" :form-items="basicInfo" />
        <!-- 服务信息 -->
        <zj-form-module title="服务信息" label-width="110px" :form-data="orderInfo" :form-items="serviceInfo" />
        <!-- 产品信息 -->
        <zj-form-module title="产品信息" :form-data="orderInfo" :form-items="workOrderType == 1 ? product_wb : product" />
        <!-- 其它信息 -->
        <zj-form-module title="其它信息" :form-data="orderInfo" :form-items="otherInfo" />
        <!-- 派单信息 -->
        <zj-form-module title="派单信息" label-width="100px" :form-data="orderInfo" :form-items="pandanxinxi" />
      </zj-form-container>
    </zj-page-fill>
    <!-- 操作按钮 -->
    <div>
      <div style="box-sizing: border-box;padding: 10px 10px 0;" v-if="id">
        <!-- 关闭 -->
        <close-button />
        <!-- 1,保存  -->
        <commitSave v-if="~btnRestrict.indexOf(1)" :orderInfo="orderInfo" :orderType="orderType" />
        <!-- 2,过程反馈  -->
        <processFeedback v-if="~btnRestrict.indexOf(2)" resultCodeName="过程反馈" :orderInfo="orderInfo"
          :orderType="orderType" />
        <!-- 3,设为异常  -->
        <abnormal v-if="~btnRestrict.indexOf(3)" :orderInfo="orderInfo" :orderType="orderType" />
        <!-- 4,加急  -->
        <urgent v-if="~btnRestrict.indexOf(4)" :orderInfo="orderInfo" :orderType="orderType" />
        <!-- 5,不加急  -->
        <unurgent v-if="~btnRestrict.indexOf(5)" :orderInfo="orderInfo" :orderType="orderType" />
        <!-- 6,取消工单  -->
        <cancelOrder v-if="~btnRestrict.indexOf(6)" :orderInfo="orderInfo" :orderType="orderType" />
        <!-- 7,回访  -->
        <processFeedback v-if="~btnRestrict.indexOf(7)" resultCodeName="回访" resultCode="回访" :orderInfo="orderInfo"
          :orderType="orderType" />
        <!-- 8,新建工单 -->
      </div>
      <div style="box-sizing: border-box;padding: 10px 10px 0;" v-else>
        <!-- 关闭 -->
        <close-button />
        <!-- 1,下派服务单  -->
        <commitSave :orderInfo="orderInfo" :orderType="orderType" />
      </div>
    </div>
  </zj-page-container>
</template>

<script>
import workOrderLogic from './mixins/workOrderLogic.js'
import basicInfo from './mixins/basicInfo.js'
import dispatchInfo from './mixins/dispatchInfo.js'
import otherInfo from './mixins/otherInfo.js'
import productColumns from './mixins/productColumns.js'
import wb_productColumns from './mixins/wb_productColumns.js'
import serviceInfo from './mixins/serviceInfo.js'
import pandanxinxi from './mixins/pandanxinxi.js'
import copyInfo from './buttons/copyInfo.vue'
import closeButton from './buttons/closeButton.vue'
import commitSave from './buttons/commitSave.vue'
import urgent from './buttons/urgent.vue'
import unurgent from './buttons/unurgent.vue'
import abnormal from './buttons/abnormal.vue'
import processFeedback from './buttons/processFeedback.vue'
import cancelOrder from './buttons/cancelOrder.vue'

export default {
  components: {
    copyInfo,
    closeButton,
    commitSave,
    urgent,
    unurgent,
    abnormal,
    processFeedback,
    cancelOrder
  },
  mixins: [
    workOrderLogic,
    basicInfo,
    dispatchInfo,
    otherInfo,
    productColumns,
    wb_productColumns,
    serviceInfo,
    pandanxinxi,
  ],
  methods: {
    allVerify(cb) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        cb && cb(valid, invalidFields, errLabels)
      })
    },
    appointVerify(arr, cb) {
      this.$refs.formRef.validateField(arr, (valid, invalidFields, errLabels) => {
        cb && cb(valid, invalidFields, errLabels)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.neibuview {
  box-sizing: border-box;
  padding-left: 16px;

  ::v-deep &>.zj-page-fill-scroll {
    box-sizing: border-box;
    padding-right: 16px;

    &>div:nth-child(1) {
      margin-top: 20px;
    }
  }
}

.pgxxTable {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
}

.withinLine {
  display: inline-block;

  ::v-deep .el-button {
    margin-left: 0;
    margin-right: 10px;
    margin-bottom: 10px;
  }
}

.redbordererr {
  ::v-deep .el-form-item {
    margin: 0 !important;
    overflow: hidden;
  }
}
</style>