|
@@ -0,0 +1,201 @@
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <el-form ref="form" :model="form" inline>
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item
|
|
|
+ label="分部"
|
|
|
+ prop="organId"
|
|
|
+ :rules="[{required: true, message: '请选择分部'}]"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ v-model="form.organId"
|
|
|
+ placeholder="请选择分部"
|
|
|
+ >
|
|
|
+ <el-option v-for="(item,index) in selects.branchs"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item
|
|
|
+ label="工作周期"
|
|
|
+ prop="month"
|
|
|
+ :rules="[{required: true, message: '请选择工作周期'}]"
|
|
|
+ >
|
|
|
+ <el-date-picker
|
|
|
+ v-model="form.month"
|
|
|
+ type="month"
|
|
|
+ placeholder="请选择工作周期">
|
|
|
+ </el-date-picker>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <el-row class="group" v-for="(groupItem, groupIndex) in form.group" :key="groupIndex">
|
|
|
+ <el-col :span="6">
|
|
|
+ <el-form-item
|
|
|
+ label="乐团主管"
|
|
|
+ :prop="`group.${groupIndex}.zhuguan`"
|
|
|
+ :rules="[{required: true, message: '请选择乐团主管'}]"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ v-model="groupItem.zhuguan"
|
|
|
+ placeholder="请选择分部"
|
|
|
+ >
|
|
|
+ <el-option v-for="(item,index) in selects.branchs"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <template v-for="(matterItem, matterIndex) in groupItem.matter">
|
|
|
+ <el-col :offset="matterIndex === 0 ? 0 : 6" :span="6" :key="groupIndex + '-' + matterIndex">
|
|
|
+ <el-form-item
|
|
|
+ :label="'任务事项' + (matterIndex + 1)"
|
|
|
+ :prop="`group.${groupIndex}.matter.${matterIndex}.type`"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ v-model="matterItem.type"
|
|
|
+ placeholder="请选择任务事项"
|
|
|
+ >
|
|
|
+ <el-option v-for="(item,index) in selects.branchs"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" :key="groupIndex + '-' + matterIndex">
|
|
|
+ <el-form-item
|
|
|
+ :label="'任务次数' + (matterIndex + 1)"
|
|
|
+ :prop="`group.${groupIndex}.matter.${matterIndex}.num`"
|
|
|
+ >
|
|
|
+ <el-select
|
|
|
+ clearable
|
|
|
+ filterable
|
|
|
+ v-model="matterItem.num"
|
|
|
+ placeholder="请输入次数"
|
|
|
+ >
|
|
|
+ <el-option v-for="(item,index) in selects.branchs"
|
|
|
+ :key="index"
|
|
|
+ :label="item.name"
|
|
|
+ :value="item.id"></el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ </el-col>
|
|
|
+ <el-col :span="6" :key="groupIndex + '-' + matterIndex">
|
|
|
+ <div class="ctrl">
|
|
|
+ <span>
|
|
|
+ <el-tooltip content="添加任务" placement="top" :open-delay=".5">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-plus"
|
|
|
+ @click="createMatter(groupItem.matter)"
|
|
|
+ circle
|
|
|
+ size="small"
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ <el-tooltip content="删除任务" placement="top" :open-delay=".5">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-minus"
|
|
|
+ circle
|
|
|
+ size="small"
|
|
|
+ @click="removeMatter(groupItem.matter, matterIndex)"
|
|
|
+ :disabled="groupItem.matter.length <= 1"
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </span>
|
|
|
+ <el-tooltip content="删除乐团主管" placement="top" :open-delay=".5">
|
|
|
+ <el-button
|
|
|
+ icon="el-icon-delete"
|
|
|
+ circle
|
|
|
+ type="danger"
|
|
|
+ size="small"
|
|
|
+ v-if="matterIndex === 0"
|
|
|
+ @click="removeGroup(form.group, groupIndex)"
|
|
|
+ :disabled="form.group.length <= 1"
|
|
|
+ ></el-button>
|
|
|
+ </el-tooltip>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </template>
|
|
|
+ </el-row>
|
|
|
+ <el-button @click="createGroup" plain block style="width: 100%">添加乐团主管</el-button>
|
|
|
+ </el-form>
|
|
|
+ <div slot="footer" style="text-align: right;margin-top: 20px;">
|
|
|
+ <el-button>取消</el-button>
|
|
|
+ <el-button type="primary" @click="submit">确认</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+const emptyMatter = {
|
|
|
+ name: '',
|
|
|
+ num: ''
|
|
|
+}
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ form: {
|
|
|
+ organId: '',
|
|
|
+ group: [{
|
|
|
+ person: '',
|
|
|
+ matter: [{...emptyMatter}]
|
|
|
+ }]
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ createGroup() {
|
|
|
+ this.form.group.push({
|
|
|
+ person: '',
|
|
|
+ matter: [{...emptyMatter}]
|
|
|
+ })
|
|
|
+ },
|
|
|
+ createMatter(matter) {
|
|
|
+ matter.push({...emptyMatter})
|
|
|
+ },
|
|
|
+ removeMatter(matter, index) {
|
|
|
+ matter.splice(index, 1)
|
|
|
+ },
|
|
|
+ removeGroup(group, index) {
|
|
|
+ group.splice(index, 1)
|
|
|
+ },
|
|
|
+ async submit() {
|
|
|
+ try {
|
|
|
+ this.$refs.form.validate(async valid => {
|
|
|
+ if (valid) {
|
|
|
+ console.log(this.form)
|
|
|
+ this.$emit('close')
|
|
|
+ this.$emit('submited')
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } catch (error) {}
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.group{
|
|
|
+ background-color: rgba(0, 0, 0, 0.05);
|
|
|
+ padding: 10px;
|
|
|
+ border-radius: 3px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+}
|
|
|
+.ctrl{
|
|
|
+ margin-top: 45px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ i{
|
|
|
+ font-size: 24px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|