add 权限申请流程

src/views/workCenter/NewProcess.vue

@@ -103,7 +103,7 @@ export default {
             },
             { // 权限申请流程
               title: this.$t('workCenter.newProcess.permissionApplicationProcess'),
-              path: ''
+              path: '/workCenter/PermissionApplicationProcess'
             },
             { // 标准宣贯流程
               title: this.$t('workCenter.newProcess.standardPromotionProcess'),

src/views/workCenter/permissionApplicationProcess/PermissionApplicationProcess.vue

@@ -0,0 +1,263 @@
+<template>
+  <internal-detail-page :title="pageTitle" :content-padding="0">
+    <!--  标题右侧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('basicInformation') }}
+        </a>
+        <!--  人员信息  -->
+        <a class="switch-item" :class="switchValue === 'user' ? 'table-operator-tab-active' : ''"
+           @click="switchChange('user')">{{ $t('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="disabled || processDisabled"
+                       v-decorator="['processName', validatorRules.processName]" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="12">
+            <!--  截止日期  -->
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('expirationDate')">
+              <a-date-picker :placeholder="$t('pleaseSelect') + $t('expirationDate')"
+                             style="width: 100%"
+                             :disabled="disabled || processDisabled"
+                             value-format="YYYY-MM-DD"
+                             v-decorator="['expirationDate']" />
+            </a-form-item>
+          </a-col>
+          <a-col :span="24">
+            <!--  流程说明  -->
+            <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('processExplain')">
+              <a-textarea :placeholder="$t('pleaseEnter') + $t('processExplain')"
+                          :maxLength="500"
+                          :rows="4"
+                          :disabled="disabled || processDisabled"
+                          v-decorator="['processExplain']" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+
+      <!--  业务基本信息  -->
+      <div class="process-part-title">{{ $t('basicServiceInformation') }}</div>
+
+      <!--  标准表格  -->
+      <base-info-table v-if="currentNode === '1'" ref="baseInfoTable"></base-info-table>
+      <!--  表单  -->
+      <a-form :form="baseInfoForm">
+        <a-row>
+          <a-col :span="12" v-if="currentNode === '1'">
+            <!--  授权到期日期  -->
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.permissionApplicationProcess.authExpirationDate')">
+              <j-date date-format="YYYY-MM-DD" style="width: 100%" showType="day" :disabled="disabled"
+                      :placeholder="$t('pleaseSelect') + $t('workCenter.permissionApplicationProcess.authExpirationDate')"
+                      v-decorator="['authExpirationDate', validatorRules.authExpirationDate]" />
+            </a-form-item>
+          </a-col>
+          <template v-if="currentNode > 1">
+            <a-col :span="12">
+              <!--  申请人  -->
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.permissionApplicationProcess.applicant')">
+                <a-input :placeholder="$t('pleaseEnter') + $t('workCenter.permissionApplicationProcess.applicant')"
+                         @change="event => event.target.value = event.target.value.trim()"
+                         :maxLength="50"
+                         :disabled="disabled"
+                         v-decorator="['applicant', validatorRules.applicant]" />
+              </a-form-item>
+            </a-col>
+            <a-col :span="12">
+              <!--  申请权限  -->
+              <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.permissionApplicationProcess.applyForPermission')">
+                <a-input :placeholder="$t('pleaseEnter') + $t('workCenter.permissionApplicationProcess.applyForPermission')"
+                         @change="event => event.target.value = event.target.value.trim()"
+                         :maxLength="50"
+                         :disabled="disabled"
+                         v-decorator="['applyForPermission', validatorRules.applyForPermission]" />
+              </a-form-item>
+            </a-col>
+          </template>
+          <a-col :span="12">
+            <!--  申请说明  -->
+            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" :label="$t('workCenter.permissionApplicationProcess.applicationDescription')">
+              <a-textarea :placeholder="$t('pleaseSelect') + $t('workCenter.permissionApplicationProcess.applicationDescription')"
+                          :maxLength="500"
+                          :rows="4"
+                          :disabled="disabled"
+                          v-decorator="['applicationDescription', validatorRules.applicationDescription]" />
+            </a-form-item>
+          </a-col>
+        </a-row>
+      </a-form>
+      <!--  流程审批信息  -->
+      <div class="process-part-title">{{ $t('processApprovalInformation') }}</div>
+      <a-form :form="approvalInfoForm">
+        <!--备注-->
+        <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('remarks')">
+          <a-textarea :placeholder="$t('pleaseEnter') + $t('remarks')"
+                      :maxLength="500"
+                      :rows="4"
+                      v-decorator="['remarks', validatorRules.remarks]" />
+        </a-form-item>
+        <!--附件-->
+        <a-form-item :labelCol="longLabelCol" :wrapperCol="longWrapperCol" :label="$t('businessSupport.questionAnswer.attach')">
+          <j-upload v-decorator="['file']" return-id />
+        </a-form-item>
+      </a-form>
+    </div>
+    <!--  人员信息  -->
+    <div v-if="switchValue === 'user'" class="detail-page-scroll-content p-0">
+      <process-detail-list :url="url">
+        <personnel-info slot="personnelInfo" :data="personnelInfoData" :currentNode="currentNode"></personnel-info>
+      </process-detail-list>
+    </div>
+
+    <div class="detail-page-bottom-operate-box">
+      <a-button type="primary" :loading="loading" @click="handleSave" ghost><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" @click="handleAgree" icon="check-circle">{{ $t('agree') }}</a-button>
+    </div>
+  </internal-detail-page>
+</template>
+
+<script>
+
+// 标准立项的人员信息
+import InternalDetailPage from '@comp/InternalDetailPage'
+import ProcessDetailList from '@comp/ProcessDetailList'
+import PersonnelInfo from '@comp/PersonnelInfo'
+import BaseInfoTable from '@views/workCenter/permissionApplicationProcess/modules/BaseInfoTable'
+
+const approvalPersonalInfo = [ // 人员信息的数据
+  {
+    id: 1,
+    nodeName: '稽查负责人申请延期',
+    nodeRoleName: '稽查负责人',
+    canChoose: false,
+    userList: `系统管理员`
+  },
+  {
+    id: 2,
+    nodeName: '负责人主管级领导审批',
+    nodeRoleName: '负责人主管级领导',
+    canChoose: true,
+    chooseType: 'radio',
+    // chooseSource: 'contactManage',
+    fieldName: 'contactUser'
+  },
+  {
+    id: 3,
+    nodeName: '稽查联络人评估',
+    nodeRoleName: '稽查联络人',
+    canChoose: false,
+    chooseType: 'checkbox',
+    // chooseSource: 'contactManage',
+    fieldName: 'contactUser'
+  }
+]
+
+export default {
+  name: 'PermissionApplicationProcess',
+  components: { BaseInfoTable, PersonnelInfo, ProcessDetailList, InternalDetailPage },
+  data () {
+    return {
+      loading: false,
+      switchValue: 'base',
+      disabled: false,
+      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 }
+      },
+      currentNode: '1',
+      personnelInfoData: [], // 人员信息数据
+      validatorRules: {
+        // 流程名称
+        processName: {
+          rules: [
+            { required: true, message: this.$t('pleaseEnter') + this.$t('processName') }
+          ],
+          validateTrigger: 'blur'
+        },
+        // 授权到期日期
+        authExpirationDate: {
+          rules: [
+            { required: true, message: this.$t('pleaseSelect') + this.$t('workCenter.permissionApplicationProcess.authExpirationDate') }
+          ],
+          validateTrigger: 'change'
+        },
+        // 备注
+        remarks: {
+          rules: [
+            { required: false, message: this.$t('pleaseEnter') + this.$t('remarks') }
+          ],
+          validateTrigger: 'blur'
+        }
+      },
+      processInfoForm: this.$form.createForm(this),
+      baseInfoForm: this.$form.createForm(this),
+      approvalInfoForm: this.$form.createForm(this),
+      url: {
+        list: '' // 人员信息右侧表的分页查询接口
+      }
+    }
+  },
+  computed: {
+    pageTitle () {
+      return this.$t('flowCenter') + this.$route.meta.title
+    },
+    processDisabled () {
+      return +this.currentNode > 1
+    }
+  },
+  methods: {
+    switchChange (value) {
+      this.switchValue = value
+    },
+    handleSave () {
+      // if (this.loading) return
+
+    },
+    handleSubmit () {
+      if (this.loading) return
+      this.currentNode = +this.currentNode + 1 + ''
+    },
+    handleAgree () {
+      if (this.loading) return
+      this.currentNode = +this.currentNode + 1 + ''
+    }
+  },
+  mounted () {
+    this.personnelInfoData = approvalPersonalInfo
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/workCenter/permissionApplicationProcess/modules/BaseInfoTable.vue

@@ -0,0 +1,152 @@
+<template>
+  <div>
+    <div class="table-operator">
+      <!--  新增  -->
+      <a-button icon="plus" type="primary" @click="handleAdd" v-has="'enterpriseStandard:add'">{{ $t('newlyAdded') }}</a-button>
+    </div>
+    <div>
+      <j-table
+        v-if="columns && columns.length > 0"
+        :columns="columns"
+        :dataSource="dataSource"
+        :can-drag="true"
+        rowKey="id"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="ipagination"
+        :scroll="{x: '100%'}"
+        @change="tableOnChange">
+
+        <!--  企标号、企标名称  -->
+        <template v-slot:standard="{text, record}">
+          <a-tooltip overlay-class-name="tooltip-style">
+            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+            <a class="table-text can-click-table-text" @click="detailClick(record)" v-if="(text || text === 0) && record.detailFlag">{{ text }}</a>
+            <div class="table-text" v-else-if="(text || text === 0) && !record.detailFlag">{{ text }}</div>
+            <div class="table-text" v-else>{{ global.emptyLine }}</div>
+          </a-tooltip>
+        </template>
+
+        <!--  操作  -->
+        <template slot="action" slot-scope="{text, record, index}">
+          <a @click="handleDelete(record, index)" >{{ $t('delete') }}</a>
+        </template>
+
+      </j-table>
+    </div>
+    <standard-selection v-show="false" ref="standardSelection" @change="changeStandardSelect"/>
+  </div>
+</template>
+
+<script>
+import { JeroListMixin } from '@/mixins/JeroListMixin'
+import JTable from '@comp/jero/JTable'
+import StandardSelection from '@comp/selection/StandardSelection'
+
+export default {
+  name: 'BaseInfoTable',
+  components: { StandardSelection, JTable },
+  mixins: [JeroListMixin],
+  data () {
+    return {
+      url: {
+        list: ''
+      },
+      model: {},
+      dataSource: [
+        {
+          id: 1,
+          inspectionBasisStandardName: '123',
+          inspectionBasisStandardNumber: '123',
+          detailFlag: true,
+          departOpinion: '123',
+          mainDutyStandardizationGroup: '1699358097292472322'
+        },
+        {
+          id: 3,
+          inspectionBasisStandardName: 'qaaa',
+          inspectionBasisStandardNumber: '12asdasdas3',
+          detailFlag: true,
+          departOpinion: '123',
+          opinion: [],
+          mainDutyStandardizationGroup: '1699358097292472322'
+        },
+        {
+          id: 2,
+          inspectionBasisStandardName: '123',
+          inspectionBasisStandardNumber: '123',
+          detailFlag: true,
+          departOpinion: '123',
+          userId: 'e9ca23d68d884d4ebb19d07889727dae'
+          // mainDutyStandardizationGroup: '1699358097292472322'
+        }
+      ],
+      columns: [
+        {
+          title: this.$t('serialNumber'),
+          dataIndex: '',
+          key: 'rowIndex',
+          align: 'center',
+          width: 80,
+          customRender: function (t, r, index) {
+            return parseInt(index) + 1
+          }
+        },
+        { // 企标编号
+          title: this.$t('workCenter.esInspectionPlan.inspectionBasisStandardNumber'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'inspectionBasisStandardNumber',
+          scopedSlots: { customRender: 'standard' }
+        },
+        { // 企标名称
+          title: this.$t('workCenter.esInspectionPlan.inspectionBasisStandardName'),
+          align: 'center',
+          width: 180,
+          dataIndex: 'inspectionBasisStandardName',
+          scopedSlots: { customRender: 'standard' }
+        },
+        {
+          // 操作
+          fixed: 'right',
+          title: this.$t('operation'),
+          // dataIndex: 'action',
+          align: 'center',
+          width: 100,
+          scopedSlots: { customRender: 'action' }
+        }
+      ]
+    }
+  },
+  methods: {
+    // 新增
+    handleAdd () {
+      this.$refs.standardSelection.standardClick()
+    },
+    changeStandardSelect (val) {
+      console.log(val)
+    },
+    // 跳转详情
+    detailClick (record) {
+      this.$openPageNewSheet({
+        path: '/enterpriseStandardLibrary/enterpriseStandardDetail',
+        query: {
+          id: record.id
+        }
+      })
+    },
+    tableOnChange (pagination, filters, sorter) {
+      this.orderBy = sorter.order === 'ascend' ? '1' : '2'
+      this.orderByField = sorter.columnKey
+      this.ipagination = pagination
+      this.getTableList()
+    },
+    getIds () {
+      return this.dataSource.map(item => item.id).join(',')
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>