You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
168 lines
4.8 KiB
168 lines
4.8 KiB
<template>
|
|
<div class="content-edit">
|
|
<div class="edit-top">
|
|
<div class="left-top">
|
|
<img src="@/assets/images/back.png" @click="cancel()" />
|
|
<div class="left-title">{{$t('page.business.study.study.create')}}</div>
|
|
</div>
|
|
<div class="right-top">
|
|
<el-button @click="cancel()">{{$t('page.business.study.study.cancel')}}</el-button>
|
|
<el-button type="primary" @click="save(1)" plain>{{$t('page.business.study.study.save')}}</el-button>
|
|
<el-button type="primary" @click="save(3)">{{$t('page.business.study.study.submit')}}</el-button>
|
|
</div>
|
|
</div>
|
|
<div class="edit-content">
|
|
<el-form ref="infoDialogForm" :model="infoDialog.formData" :rules="infoDialog.rules" label-width="150px" class="edit-form">
|
|
<el-row>
|
|
<el-col :span="24">
|
|
<el-form-item :label="$t('page.business.study.study.name')+'：'" prop="name">
|
|
<el-input v-model="infoDialog.formData.name" :placeholder="$t('form.placeholderInput')" maxlength="100" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item :label="$t('page.business.study.study.sn')+'：'" prop="sn">
|
|
<el-input v-model="infoDialog.formData.sn" :placeholder="$t('form.placeholderInput')" maxlength="100" :readonly="this.infoDialog.formData.id!=''" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item :label="$t('page.business.study.study.leader')+'：'" prop="leader">
|
|
<SelectDeptUser @change="changeLeader" v-model="infoDialog.formData.leaderObj" />
|
|
</el-form-item>
|
|
</el-col>
|
|
<el-col :span="24">
|
|
<el-form-item :label="$t('page.business.study.study.remark')+'：'" prop="remark">
|
|
<el-input type="textarea" :rows="5" :placeholder="$t('form.placeholderInput')" v-model="infoDialog.formData.remark" maxlength="500" show-word-limit> </el-input>
|
|
</el-form-item>
|
|
</el-col>
|
|
</el-row>
|
|
</el-form>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { study_info,study_save} from "@/api/business/study/study";
|
|
import SelectDeptUser from '../../comps/select/SelectDeptUser.vue';
|
|
const EmptyDialogData = {
|
|
id:'',
|
|
name:'',
|
|
sn:'',
|
|
leader:'',
|
|
reamrk:'',
|
|
leaderObj:{
|
|
id:'',name:''
|
|
}
|
|
}
|
|
export default {
|
|
name: "StudyEdit",
|
|
props:{
|
|
},
|
|
components:{
|
|
SelectDeptUser
|
|
},
|
|
computed: {
|
|
},
|
|
filters:{
|
|
},
|
|
data() {
|
|
return {
|
|
infoDialog:{
|
|
visible:false,
|
|
formData:{},
|
|
rules:{
|
|
name: [
|
|
{ required: true, message: this.$t('page.business.study.study.inputName'), trigger: "blur" }
|
|
],
|
|
sn: [
|
|
{ required: true, message: this.$t('page.business.study.study.inputSn'), trigger: "blur" }
|
|
],
|
|
leader: [
|
|
{ required: true, message: this.$t('page.business.study.study.inputLeader'), trigger: "change" }
|
|
],
|
|
}
|
|
},
|
|
};
|
|
},
|
|
created() {
|
|
},
|
|
methods: {
|
|
changeLeader(val){
|
|
this.infoDialog.formData.leader = val.id
|
|
this.infoDialog.formData.leaderName = val.name
|
|
this.$refs.infoDialogForm.clearValidate('leader')
|
|
},
|
|
edit(row) {
|
|
this.$refs['infoDialogForm'] && this.$refs['infoDialogForm'].resetFields()
|
|
this.infoDialog.formData = _.merge({}, EmptyDialogData)
|
|
if(row && row.id){
|
|
this.$modal.loading()
|
|
study_info({id:row.id}).then(({data}) => {
|
|
this.infoDialog.formData = data
|
|
this.infoDialog.formData.leaderObj = {
|
|
id:data.leader,
|
|
name:data.leaderName
|
|
}
|
|
}).finally(() => {
|
|
this.$modal.closeLoading()
|
|
})
|
|
}else{
|
|
}
|
|
},
|
|
cancel(){
|
|
this.$emit('cancel')
|
|
},
|
|
save(status) {
|
|
this.$refs['infoDialogForm'].validate(valid => {
|
|
if (valid) {
|
|
this.$modal.loading()
|
|
this.infoDialog.formData.status = status
|
|
study_save(this.infoDialog.formData).then(() => {
|
|
this.$emit('save')
|
|
}).finally(() => {
|
|
this.$modal.closeLoading()
|
|
})
|
|
}
|
|
})
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
<style lang="scss">
|
|
.content-edit{
|
|
background: #f5f5f5;
|
|
padding: 0;
|
|
.edit-top{
|
|
background: #fff;
|
|
padding: 10px 20px;
|
|
margin-bottom: 10px;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
.left-top{
|
|
flex-shrink: 0;
|
|
display: flex;
|
|
flex-direction: row;
|
|
align-items: center;
|
|
img{
|
|
height: 16px;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
.right-top{
|
|
|
|
}
|
|
|
|
}
|
|
}
|
|
.edit-content{
|
|
background: #fff;
|
|
padding: 20px;
|
|
min-height: 500px;
|
|
.edit-form{
|
|
width: 800px;
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|