laws-sinotruk-client/src/views/workCenter/standardConsultationProcess/StandardConsultationProcess.vue

<template>
  <internal-detail-page :content-padding="0" :title="pageTitle">
    <!--  标题右侧tab  -->
    <template v-slot:titleRightCustom>
      <div class="table-operator-tab">
        <!--基础信息-->
        <a class="switch-item" :class="switchValue === 'base' ? 'table-operator-tab-active' : ''"
           @click="switchChange('base')">{{ $t('workCenter.basicInformation') }}
        </a>
        <!--人员信息-->
        <a class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
           @click="switchChange('user')">{{ $t('workCenter.personalInformation') }}
        </a>
      </div>
    </template>

    <!--基本信息-->
    <div class="detail-page-scroll-content" v-show="switchValue === 'base'">
      <!--流程信息-->
      <div class="process-part-title">{{ $t('processInformation') }}</div>
      <a-form :form="processInfoForm">
        <a-row>
          <a-col :span="12">
            <!--流程名称-->
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('processName')">
              <a-input :placeholder="$t('pleaseEnter') + $t('processName')"
                       @change="event => event.target.value = event.target.value.trim()"
                       :maxLength="50"
                       disabled
                       v-decorator="['nodeName']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!--截止日期-->
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('expirationDate')">
              <a-date-picker class="box-input"
                             :placeholder="$t('pleaseSelect') + $t('expirationDate')"
                             :getCalendarContainer="(trigger) => trigger.parentNode"
                             format="YYYY-MM-DD"
                             value-format="YYYY-MM-DD"
                             style="width: 100%" />
            </a-form-item>
          </a-col>
        </a-row>
        <!--流程说明-->
        <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('processExplain')">
          <a-input :placeholder="$t('pleaseEnter') + $t('processExplain')"
                   @change="event => event.target.value = event.target.value.trim()"
                   :maxLength="500"
                   type="textarea"
                   v-decorator="['nodeName']" />
        </a-form-item>
      </a-form>

      <!--业务基本信息-->
      <div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
      <a-form :form="basicServiceInfoForm">
        <a-row>
          <a-col :span="12">
            <!--标准编号-->
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardNumber')">
              <standard-selection v-decorator="['nodeName']" :placeholder="$t('pleaseSelect') + $t('standardNumber')" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!--标准名称-->
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('standardName')">
              <a-input :placeholder="$t('pleaseEnter') + $t('standardName')"
                       @change="event => event.target.value = event.target.value.trim()"
                       :maxLength="50"
                       disabled
                       v-decorator="['nodeName']" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <!--标准文本-->
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.standardConsultationProcess.standardText')">
              <div class="box-title-text">
                <a-input class="box-input"
                         v-decorator="['nodeName']"
                         readonly
                         :placeholder="$t('pleaseSelect') + $t('workCenter.standardConsultationProcess.standardText')" />
                <a-button type="primary" class="button-box" @click="chooseStandardText">
                  {{ this.$t('workCenter.standardConsultationProcess.selectText') }}
                </a-button>
              </div>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
    </div>

    <div class="detail-page-bottom-operate-box">
      <!--转办 审批节点存在-->
      <a-button type="primary" :loading="loading" ghost icon="arrow-up" @click="handleTurnTo">{{ $t('turnTo') }}</a-button>
      <!--保存 发起节点、审批节点都存在-->
      <a-button type="primary" :loading="loading" ghost @click="handleSave"><i class="iconfont icon-save" />{{ $t('preservation') }}</a-button>
      <!--提交 发起节点存在-->
      <a-button type="primary" :loading="loading" @click="handleSubmit" icon="upload">{{ $t('submit') }}</a-button>
      <!--同意 审批节点存在-->
      <a-button type="primary" :loading="loading" icon="check-circle" @click="handleSubmit">{{ $t('agree') }}</a-button>
      <!--驳回 审批节点存在-->
      <a-button type="primary" :loading="loading" icon="close-circle" @click="handleSubmit">{{ $t('reject') }}</a-button>
    </div>
  </internal-detail-page>
</template>

<script>
import InternalDetailPage from '../../../components/InternalDetailPage.vue'
import StandardSelection from '../../../components/selection/StandardSelection.vue'

export default {
  name: 'StandardConsultationProcess',
  components: { InternalDetailPage, StandardSelection },
  data () {
    return {
      switchValue: 'base',
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      },
      longLabelCol: {
        xs: { span: 24 },
        sm: { span: 2 }
      },
      longWrapperCol: {
        xs: { span: 24 },
        sm: { span: 22 }
      },
      // 流程信息表单
      processInfoForm: this.$form.createForm(this),
      // 业务基本信息表单
      basicServiceInfoForm: this.$form.createForm(this)
    }
  },
  computed: {
    pageTitle () {
      return `${this.$t('flowCenter')}${this.$route.meta.title}（法规工程师发起）`
    }
  },
  methods: {
    switchChange (value) {
      this.switchValue = value
    },
    chooseStandardText () {

    }
  }
}
</script>

<style scoped lang="less">
.box-title-text {
  height: 40px;
  line-height: 40px;
  display: flex;
  align-items: center;

  .box-input {
    width: 100%;
  }

  .button-box {
    margin-left: 10px;
  }
}
</style>