| | |
| | | <template> |
| | | <div class="box"> |
| | | <el-form ref="formS" :model="form" :rules="rules" label-width="120px"> |
| | | <el-row> |
| | | <el-col :span="15"> |
| | | <el-form-item label="流程标题"> |
| | | <el-input v-model="form.names" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="15"> |
| | | <el-form-item label="下级审批日期"> |
| | | <el-date-picker v-model="form.date1" type="date" placeholder="下级审批日期" style="width: 100%" /> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="15"> |
| | | <el-form-item label=""> |
| | | <el-checkbox v-model="form.delivery" label="是否抄送" @change="typeChang"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row v-if="form.delivery"> |
| | | <el-col :span="15"> |
| | | <el-form-item label="抄送给" prop="resource"> |
| | | <el-input v-model="form.resource" placeholder=""> |
| | | <template #append> <el-button :icon="Search" @click="openDai" /> </template |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row> |
| | | <el-col :span="15"> |
| | | <el-form-item label=""> |
| | | <el-checkbox v-model="form.type" label="指定下一步处理者(不设置就使用默认处理人)"/> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | <el-row v-if="form.type"> |
| | | <el-col :span="15"> |
| | | <el-form-item label="指定" prop="desc"> |
| | | <el-input v-model="form.desc" placeholder=""> |
| | | <template #append> <el-button :icon="Search" @click="openDai" /> </template |
| | | ></el-input> |
| | | </el-form-item> |
| | | </el-col> |
| | | </el-row> |
| | | </el-form> |
| | | </div> |
| | | <DailogSearchUser ref="ShowUser"></DailogSearchUser> |
| | | </template> |
| | | <script lang="ts"> |
| | | import { defineComponent, ref, reactive } from 'vue'; |
| | | import DailogSearchUser from '/@/components/DailogSearchUser/index.vue' |
| | | import { Search } from '@element-plus/icons-vue'; |
| | | import type { FormInstance, FormRules } from 'element-plus' |
| | | export default defineComponent({ |
| | | components:{DailogSearchUser}, |
| | | setup() { |
| | | const formS=ref<FormInstance>() |
| | | let form = reactive({ |
| | | names: '', |
| | | region: '', |
| | | date1: '', |
| | | date2: '', |
| | | delivery: "", |
| | | type: "", |
| | | resource: '', |
| | | desc: '', |
| | | }); |
| | | const typeChang=()=>{ |
| | | console.log('tag',form) |
| | | } |
| | | const rules = reactive<FormRules>({ |
| | | resource: [ |
| | | { |
| | | type: 'array', |
| | | required: true, |
| | | message: '用户不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ], |
| | | desc: [ |
| | | { |
| | | required: true, |
| | | message: '用户不能为空', |
| | | trigger: 'change', |
| | | }, |
| | | ]}) |
| | | const ShowUser=ref() |
| | | const openDai =()=>{ |
| | | ShowUser.value.openDailog() |
| | | } |
| | | return { |
| | | form, |
| | | rules, |
| | | formS, |
| | | typeChang, |
| | | ShowUser, |
| | | openDai, |
| | | Search, |
| | | }; |
| | | }, |
| | | }); |
| | | </script> |
| | | |
| | | <style scoped> |
| | | .box { |
| | | margin: 30px 0 100px 0; |
| | | background-color: #fff; |
| | | border: 1px solid #dcdfe6; |
| | | box-shadow: 0 2px 4px 0 rgb(0 0 0 / 12%), 0 0 6px 0 rgb(0 0 0 / 4%); |
| | | padding: 20px; |
| | | } |
| | | .el-row { |
| | | padding: 0 0 20px 0; |
| | | } |
| | | </style> |