| | |
| | | <template> |
| | | <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body="true"> |
| | | <div> |
| | | <el-tag v-for="tag in tags" :key="tag" closable disable-transitions effect="dark" @click="handleClickTag(tag)" |
| | | @close="handleCloseTag(tag)"> |
| | | <span> {{ tag.name }}</span> |
| | | </el-tag> |
| | | </div> |
| | | |
| | | <el-dialog :title="title" :visible.sync="dialogVisible" append-to-body="true" width="30%"> |
| | | <el-tag v-for="tag in tags" :key="tag" closable disable-transitions effect="Plain" size="medium" |
| | | @click="handleClickTag(tag)" @close="handleCloseTag(tag)"> |
| | | <span> {{ tag.name }}</span> |
| | | </el-tag> |
| | | <el-divider v-if="tags.length !== 0"></el-divider> |
| | | <el-form :model="saveParam" class="demo-form-inline" label-position="left" label-width="auto" :rules="rules"> |
| | | <el-form-item label="流程模板"> |
| | | <el-input placeholder="流程模板" v-model="saveParam.modelName" disabled ></el-input> |
| | | </el-form-item> |
| | | <el-form-item label="流程名称" prop="processName"> |
| | | <el-input placeholder="流程名称" v-model="saveParam.processName" > |
| | | </el-input> |
| | | </el-form-item> |
| | | <el-form-item label="流程描述"> |
| | | <el-input placeholder="流程描述" type="textarea" :rows="4" v-model="saveParam.processDesc" > |
| | | </el-input> |
| | | </el-form-item> |
| | | </el-form> |
| | | <el-divider></el-divider> |
| | | <div class="btns-icon"> |
| | | <el-button type="primary" icon="el-icon-star-off" @click="handleCollect"></el-button> |
| | | <!-- <el-button type="primary" icon="el-icon-refresh" ></el-button> --> |
| | | <el-button icon="el-icon-star-off" circle @click="handleCollect"></el-button> |
| | | </div> |
| | | <el-form :model="saveParam" class="demo-form-inline" label-position="left"> |
| | | <el-form :model="collectParam" class="demo-form-inline" label-position="left" label-width="auto"> |
| | | <el-form-item :label="item.taskName" v-for="(item, index) in initFrom" :key="index"> |
| | | <el-select style="width: 50%;" v-model="saveParam.flowTaskUsers[index]['userId']" |
| | | <el-select style="width: 80%;" filterable v-model="collectParam.flowTaskUsers[index]['userId']" |
| | | :placeholder="item.taskName" @change="handleSelect($event, index)"> |
| | | <el-option :label="key.userNames" :value="key.userId" v-for="(key, keyi) in typeName" |
| | | :key="keyi"></el-option> |
| | |
| | | // 标题 |
| | | title: { |
| | | typeof: String, |
| | | default: '人员设置' |
| | | default: '流程审批' |
| | | }, |
| | | // 模板id |
| | | code: { |
| | | typeof: String, |
| | | default: '' |
| | | // 参数:选择的id,多个以数组方式传递:['id','id'],模板id,模板用途,流程名字,流程模板 |
| | | parameter: { |
| | | typeof: Object, |
| | | default: () => { } |
| | | }, |
| | | // 模板用途 |
| | | type: { |
| | | typeof: String, |
| | | default: '' |
| | | parameterKeys: { |
| | | typeof: Object, |
| | | default: () => { |
| | | return { |
| | | ids: 'ids', |
| | | flowName: 'flowName', |
| | | flowTemplate: 'flowTemplate', |
| | | code: 'code', |
| | | type: 'type' |
| | | } |
| | | } |
| | | } |
| | | |
| | | }, |
| | | watch: { |
| | | visible(n) { |
| | |
| | | data() { |
| | | return { |
| | | dialogVisible: this.visible, |
| | | isCollent: false, |
| | | initFrom: [], |
| | | tags: [], |
| | | typeName: [], |
| | | saveParam: {}, |
| | | collectParam: {}, |
| | | saveParam: this.saveParam(), |
| | | users: [], |
| | | |
| | | rules: { |
| | | processName: [ |
| | | { required: true, message: '模板名称不能为空', trigger: 'blur' }, |
| | | { min: 1, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' } |
| | | ] |
| | | } |
| | | } |
| | | }, |
| | | |
| | | mounted() { |
| | | this.apiInit() |
| | | this.apiDict() |
| | | }, |
| | | methods: { |
| | | saveParam() { |
| | | return { |
| | | modelName: this.parameter[this.parameterKeys.flowName], |
| | | processName: this.parameter[this.parameterKeys.flowTemplate], |
| | | topName: this.title, |
| | | ids: this.parameter[this.parameterKeys.ids], |
| | | } |
| | | }, |
| | | async apiInit() { |
| | | const response = await personnelInit({ type: this.type, templateId: this.code }) |
| | | const response = await personnelInit({ type: this.parameter[this.parameterKeys.type], templateId: this.parameter[this.parameterKeys.code] }) |
| | | if (response.status === 200) { |
| | | console.log(response) |
| | | this.initFrom = response.data.data.user |
| | | this.tags = response.data.data.collect |
| | | const { modelKey, templateId } = response.data.data.flow |
| | | let flowTaskUsers = response.data.data.user |
| | | this.saveParam = { modelKey, templateId, flowTaskUsers: flowTaskUsers } |
| | | this.collectParam = { modelKey, templateId, flowTaskUsers: flowTaskUsers } |
| | | this.saveParam = { ...this.saveParam, modelKey, templateId } |
| | | this.handleClickTag(this.tags[0]) |
| | | } |
| | | }, |
| | |
| | | cancelButtonText: '取消', |
| | | }).then(async ({ value }) => { |
| | | console.log(this.users) |
| | | this.saveParam.flowTaskUsers = this.users |
| | | this.saveParam = { ...this.saveParam, name: value } |
| | | console.log(this.saveParam) |
| | | const response = await personnelCollect(this.saveParam) |
| | | this.collectParam.flowTaskUsers = this.users |
| | | this.collectParam = { ...this.collectParam, name: value } |
| | | console.log(this.collectParam) |
| | | const response = await personnelCollect(this.collectParam) |
| | | if (response.status === 200) { |
| | | this.$nextTick(() => { |
| | | this.apiInit() |
| | |
| | | if (response.status === 200) { |
| | | console.log(response) |
| | | this.apiInit() |
| | | this.isCollent = true |
| | | this.$message({ |
| | | type: 'success', |
| | | message: response.data.msg |
| | |
| | | }, |
| | | async apiSave() { |
| | | try { |
| | | const { modelKey, templateId } = this.saveParam |
| | | const response = await personnelSave({ modelKey, templateId }) |
| | | const response = await personnelSave(this.saveParam) |
| | | if (response.status === 200) { |
| | | console.log(response) |
| | | this.$message({ |
| | | type: 'success', |
| | | message: response.data.msg |
| | | }); |
| | | type: 'success', |
| | | message: response.data.msg |
| | | }); |
| | | this.done() |
| | | } |
| | | } catch { |
| | |
| | | handleClickTag(event) { |
| | | console.log(event) |
| | | const flowTaskUsers = event.flowTaskUsers |
| | | this.saveParam.flowTaskUsers = flowTaskUsers.map(item => { |
| | | this.collectParam.flowTaskUsers = flowTaskUsers.map(item => { |
| | | const { taskId, taskName, userId, userName } = item |
| | | return { taskId, taskName, userId, userName } |
| | | }) |
| | |
| | | handleSelect(event, index) { |
| | | const res = this.typeName.find(item => item.userId === event) |
| | | const { userName } = res |
| | | let users = { ... this.saveParam.flowTaskUsers[index], userName } |
| | | let users = { ... this.collectParam.flowTaskUsers[index], userName } |
| | | console.log(users) |
| | | this.users[index] = users |
| | | }, |
| | |
| | | this.done() |
| | | }, |
| | | handleConfirm() { |
| | | console.log(this.users) |
| | | console.log(this.saveParam) |
| | | this.apiSave() |
| | | } |