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

<template>
  <zj-page-container>
    <zj-page-fill class="neibuview">
      <zj-form-container ref="formRef" :form-data="orderInfo" :form-rules="formRules" :form-attributes="{ size: 'mini' }">
        <!-- 派工信息 创建不需要 -->
        <zj-form-module title="派工信息" label-width="68px" :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 key="paigongxinxitable" :columns="pgxxColumns" :table-data="pgxxTableData" :table-attributes="{
                height: '100%',
                border: true
              }" />
            </div>
          </div>
        </zj-form-module>
        <!-- 基本信息 -->
        <zj-form-module title="基本信息" label-width="100px" :form-data="orderInfo" :form-items="basicInfo" />
        <!-- 服务信息 -->
        <zj-form-module title="服务信息" label-width="100px" :form-data="orderInfo" :form-items="serviceInfo" />
        <!-- 产品信息 -->
        <zj-form-module :title="`<span style='color:red'>*</span> ${orderInfo.serviceCategoryId == 1 ? '产品信息' : '服务内容'}`"
          :form-data="orderInfo" :form-items="product">
        </zj-form-module>
        <!-- 其它信息 -->
        <zj-form-module title="其它信息" label-width="80px" :form-data="orderInfo" :form-items="otherInfo" />
        <!-- 派单信息 -->
        <zj-form-module label-width="100px" title="派单信息" :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 />
        <!-- 临时保存 -->
        <commit-temp-save v-if="~btnRestrict.indexOf(25)" :order-info="orderInfo" :order-type="orderType"
          @upoptions="upoptions" />
        <!-- 关闭工单 -->
        <close-order v-if="~btnRestrict.indexOf(1)" :order-info="{ ...orderInfo }" :order-type="orderType"
          @upoptions="upoptions" />
        <!-- 过程反馈 -->
        <process-feedback v-if="~btnRestrict.indexOf(11)" :order-info="orderInfo" :order-type="orderType"
          @upoptions="upoptions" />
        <!-- 驳回 -->
        <div class="withinLine">
          <rejectOrder v-if="~btnRestrict.indexOf(13)" :order-info="orderInfo" @upoptions="upoptions" />
        </div>
        <!-- 备注 -->
        <process-feedback v-if="~btnRestrict.indexOf(14)" :order-info="orderInfo" :order-type="orderType"
          resultCode_="999" resultCodeName="备注" @upoptions="upoptions" />
        <!-- 作废 -->
        <void-view v-if="~btnRestrict.indexOf(15)" :order-info="orderInfo" :order-type="orderType"
          @upoptions="upoptions" />
        <!-- 激活工单 -->
        <activate v-if="~btnRestrict.indexOf(16)" :order-info="orderInfo" :order-type="orderType"
          @upoptions="upoptions" />
      </div>
      <div style="box-sizing: border-box;padding: 10px 10px 0;" v-else>
        <!-- 关闭 -->
        <close-button />
        <!-- 临时保存 -->
        <commit-temp-save :order-info="orderInfo" :order-type="orderType" @upoptions="upoptions" />
        <!-- 下派工单 -->
        <commit-save :order-info="orderInfo" :order-type="orderType" :cp_gpsAddress="cp_gpsAddress"
          @upoptions="upoptions" />
      </div>
    </div>
  </zj-page-container>
</template>

<script>
import workOrderSelectData from './mixins/workOrderSelectData.js'
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 serviceInfo from './mixins/serviceInfo.js'
import pandanxinxi from './mixins/pandanxinxi.js'
import commitSave from './buttons/commitSave.vue'
import commitTempSave from './buttons/commitTempSave.vue'
import voidView from './buttons/void.vue'
import processFeedback from './buttons/processFeedback.vue'
import closeButton from './buttons/closeButton.vue'
import copyInfo from './buttons/copyInfo.vue'
import closeOrder from './buttons/closeOrder.vue'
import activate from './buttons/activate.vue'
import rejectOrder from './buttons/rejectOrder.vue'

export default {
  components: {
    activate,
    closeOrder,
    commitSave,
    commitTempSave,
    voidView,
    processFeedback,
    closeButton,
    copyInfo,
    rejectOrder,
  },
  mixins: [
    workOrderSelectData,
    workOrderLogic,
    basicInfo,
    dispatchInfo,
    otherInfo,
    productColumns,
    serviceInfo,
    pandanxinxi,
  ],
  methods: {
    upoptions() {

    },
    allVerify(cb) {
      this.$refs.formRef.validate((valid, invalidFields, errLabels) => {
        if (valid) {
          cb && cb()
        }
      })
    },
    appointVerify(arr, cb) {
      this.$refs.formRef.validateField_fx(arr, (valid, invalidFields, errLabels) => {
          if (valid) {
            cb && cb()
          }
        }
      )
    }
  }
}
</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;
  }
}
</style>