wuye / webui

<template>
  <div class="workflow-setting-container">
    <el-row :gutter="20">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>{{ $t('workflowSettingManage.title') }}</span>
          </div>
          <el-form label-width="120px">
            <el-form-item :label="$t('workflowSettingManage.flowName')">
              <el-input v-model="workflowSettingInfo.flowName"
                :placeholder="$t('workflowSettingManage.flowNamePlaceholder')" disabled />
            </el-form-item>

            <el-form-item :label="$t('workflowSettingManage.description')">
              <el-input v-model="workflowSettingInfo.describle" type="textarea"
                :placeholder="$t('workflowSettingManage.descriptionPlaceholder')" :rows="3" />
            </el-form-item>

            <el-form-item :label="$t('workflowSettingManage.submitterEnd')">
              <el-select v-model="workflowSettingInfo.startNodeFinish" style="width:100%"
                :placeholder="$t('workflowSettingManage.submitterEndPlaceholder')">
                <el-option :label="$t('workflowSettingManage.yes')" value="Y" />
                <el-option :label="$t('workflowSettingManage.no')" value="N" />
              </el-select>
            </el-form-item>

            <el-form-item :label="$t('workflowSettingManage.flowSteps')">
              <div class="step-actions">
                <el-button type="primary" @click="addWorkflowStep">
                  {{ $t('workflowSettingManage.addStep') }}
                </el-button>
              </div>

              <div v-for="(item, index) in workflowSettingInfo.steps" :key="index" class="step-item">
                <div class="step-header">
                  <span>{{ $t('workflowSettingManage.step') }} {{ index + 1 }}</span>

                  <el-button type="text" @click="chooseStaff(item)">
                    {{ item.staffId ? item.staffName : $t('workflowSettingManage.selectStaff') }}
                  </el-button>

                  <el-radio-group v-model="item.type" @change="chooseType(item)">
                    <el-radio :label="2">{{ $t('workflowSettingManage.normalFlow') }}</el-radio>
                    <el-radio v-if="index !== 0" :label="1">
                      {{ $t('workflowSettingManage.countersign') }}
                    </el-radio>
                  </el-radio-group>

                  <el-button type="text" @click="deleteStep(item)">
                    {{ $t('workflowSettingManage.deleteStep') }}
                  </el-button>

                  <el-button v-if="item.type == 1" type="text" @click="addStaff(item)">
                    {{ $t('workflowSettingManage.addStaff') }}
                  </el-button>
                </div>

                <div v-for="(subItem, subIndex) in item.subStaff" :key="subIndex" class="sub-staff-item">
                  <el-button type="text" @click="chooseStaff(subItem)">
                    {{ subItem.staffId ? subItem.staffName : $t('workflowSettingManage.selectStaff') }}
                  </el-button>

                  <el-button type="text" @click="deleteStaff(item, subItem)">
                    {{ $t('workflowSettingManage.deleteStaff') }}
                  </el-button>
                </div>
              </div>
            </el-form-item>
          </el-form>

          <div class="form-actions">
            <el-button type="primary" @click="saveWorkflowSettingInfo">
              {{ $t('common.submit') }}
            </el-button>
            <el-button type="warning" @click="_goBack">
              {{ $t('common.back') }}
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="20" class="mt-20">
      <el-col :span="24">
        <el-card>
          <div slot="header" class="clearfix">
            <span>{{ $t('workflowSettingManage.instructions') }}</span>
          </div>
          <div v-if="workflowSettingInfo.flowType === '70007'">
            <p>1. {{ $t('workflowSettingManage.instruction1') }}</p>
            <p>2. {{ $t('workflowSettingManage.instruction2') }}</p>
            <p>3. {{ $t('workflowSettingManage.instruction3') }}</p>
            <p>4. {{ $t('workflowSettingManage.instruction4') }}</p>
          </div>
          <!-- 其他流程类型的说明类似 -->
        </el-card>
      </el-col>
    </el-row>

    <select-staff ref="selectStaff"  @selectStaffs="handleStaffSelected"/>
  </div>
</template>

<script>
import { getCommunityId } from '@/api/community/communityApi'
import SelectStaff from '@/components/staff/SelectStaff'
import {
  getWorkflowSteps,
  updateWorkflow
} from '@/api/system/workflowSettingManageApi'

export default {
  name: 'WorkflowSettingManageList',
  components: {
    SelectStaff
  },
  data() {
    return {
      communityId: '',
      workflowSettingInfo: {
        flowId: '',
        flowName: '',
        flowType: '',
        describle: '',
        startNodeFinish: 'Y',
        steps: []
      }
    }
  },
  created() {
    this.communityId = getCommunityId()
    this._initWorkflowSettingInfo()
  },
  methods: {
    async _initWorkflowSettingInfo() {
      const flowId = this.$route.query.flowId

      if (!flowId) {
        this.$message.error(this.$t('workflowSettingManage.invalidOperation'))
        this.$router.go(-1)
        return
      }

      this.workflowSettingInfo.flowId = flowId
      this.workflowSettingInfo.flowName = this.$route.query.flowName
      this.workflowSettingInfo.flowType = this.$route.query.flowType
      this.workflowSettingInfo.startNodeFinish = this.$route.query.startNodeFinish || 'Y'

      try {
        const { data } = await getWorkflowSteps({
          communityId: this.communityId,
          flowId
        })
        this._freshResStep(data)
      } catch (error) {
        this.$message.error(error.message)
      }
    },

    _freshResStep(data) {
      // 处理步骤数据的逻辑
      console.log(data)
    },

    addWorkflowStep() {
      const step = {
        seq: this.workflowSettingInfo.steps.length,
        staffId: '',
        staffName: '',
        type: '2',
        subStaff: []
      }
      this.workflowSettingInfo.steps.push(step)
    },

    chooseStaff(item) {
      item.from = this._getStaffFromType()
      this.$refs.selectStaff.open(item)
    },

    _getStaffFromType() {
      // 根据flowType返回对应的from值
    },

    _goBack() {
      this.$router.go(-1)
    },

    deleteStep(step) {
      this.workflowSettingInfo.steps = this.workflowSettingInfo.steps.filter(
        s => s.seq !== step.seq
      )
    },

    addStaff(step) {
      step.subStaff.push({
        id: this.$uuid(),
        staffId: '',
        staffName: '',
        staffRole: '1001'
      })
    },

    deleteStaff(step, subStaff) {
      step.subStaff = step.subStaff.filter(s => s.id !== subStaff.id)
    },

    chooseType(item) {
      if (item.type === '1') {
        item.subStaff = []
      }
    },

    handleStaffSelected(staffs) {
      console.log(staffs)
    },

    async saveWorkflowSettingInfo() {
      try {
        await updateWorkflow({
          ...this.workflowSettingInfo,
          communityId: this.communityId
        })
        this.$message.success(this.$t('common.saveSuccess'))
        this._goBack()
      } catch (error) {
        this.$message.error(error.message)
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.workflow-setting-container {
  padding: 20px;

  .step-item {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ebeef5;
    border-radius: 4px;

    .step-header {
      display: flex;
      align-items: center;
      margin-bottom: 10px;

      >* {
        margin-right: 15px;
      }
    }

    .sub-staff-item {
      margin-left: 40px;
      margin-bottom: 10px;

      >* {
        margin-right: 15px;
      }
    }
  }

  .form-actions {
    text-align: right;
    margin-top: 20px;
  }

  .mt-20 {
    margin-top: 20px;
  }
}
</style>