模块新增布局更改

master^2
xia 1 year ago
parent df04c8139a
commit 22775002a8
  1. 590
      ant-design-vue-jeecg/src/views/modulex/modules/ModulexForm.vue

@ -1,272 +1,460 @@
<template>
<a-spin :spinning="confirmLoading">
<j-form-container :disabled="formDisabled">
<a-form-model ref="form" :model="model" :rules="validatorRules" slot="detail">
<a-form-model
ref="form"
:model="model"
:rules="validatorRules"
slot="detail"
>
<!-- <a-row style="border-bottom: 1px solid gainsboro">项目描述</a-row> -->
<a-row>
<a-col :span="24">
<a-form-model-item label="上级模块" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pid">
<!-- <a-input v-model="model.pid" placeholder="请输入上级模块id" ></a-input>-->
<j-dict-select-tag v-model="model.pid" dict-code="modulex,module_name,id"
placeholder="请输入上级模块" style="width: 100%" />
<a-form-model-item
label="上级模块"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="pid"
>
<!-- <a-input v-model="model.pid" placeholder="请输入上级模块id" ></a-input>-->
<j-dict-select-tag
v-model="model.pid"
dict-code="modulex,module_name,id"
placeholder="请输入上级模块"
style="width: 100%"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="项目名" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="projectId">
<!-- <a-input v-model="model.projectId" placeholder="请输入项目id" ></a-input>-->
<j-dict-select-tag v-model="model.projectId" dict-code="projectx,project_name,id"
placeholder="请输入项目id" style="width: 100%" />
<a-form-model-item
label="项目名"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="projectId"
>
<!-- <a-input v-model="model.projectId" placeholder="请输入项目id" ></a-input>-->
<j-dict-select-tag
v-model="model.projectId"
dict-code="projectx,project_name,id"
placeholder="请输入项目id"
style="width: 100%"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="中文名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="moduleName">
<a-input v-model="model.moduleName" placeholder="请输入中文名称" ></a-input>
<a-form-model-item
label="中文名称"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="moduleName"
>
<a-input
v-model="model.moduleName"
placeholder="请输入中文名称"
></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="英文名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="moduleEnName">
<a-input v-model="model.moduleEnName" placeholder="请输入英文名称" ></a-input>
<a-form-model-item
label="英文名称"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="moduleEnName"
>
<a-input
v-model="model.moduleEnName"
placeholder="请输入英文名称"
></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="模块编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="moduleCode">
<a-input v-model="model.moduleCode" placeholder="请输入模块编码" ></a-input>
<a-form-model-item
label="模块编码"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="moduleCode"
>
<a-input
v-model="model.moduleCode"
placeholder="请输入模块编码"
></a-input>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="内容描述" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="pmDescribe">
<a-input v-model="model.pmDescribe" placeholder="请输入内容描述" ></a-input>
<a-form-model-item
label="任务等级"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="workLevel"
>
<!-- <a-input-number v-model="model.workLevel" placeholder="请输入任务等级" style="width: 100%" />-->
<j-dict-select-tag
v-model="model.workLevel"
dict-code="work_level"
placeholder="请输入任务等级"
style="width: 100%"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="责任人" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="managerUsers">
<!-- <a-input v-model="model.managerUsers" placeholder="请输入责任人" ></a-input>-->
<j-select-user-by-dep v-model="model.managerUsers" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="任务等级" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workLevel">
<!-- <a-input-number v-model="model.workLevel" placeholder="请输入任务等级" style="width: 100%" />-->
<j-dict-select-tag v-model="model.workLevel" dict-code="work_level"
placeholder="请输入任务等级" style="width: 100%" />
<a-form-model-item
label="用户角色"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="userRole"
>
<!-- <a-input v-model="model.userRole" placeholder="请输入用户角色" ></a-input>-->
<j-multi-select-tag
type="list_multi"
v-model="model.userRole"
dictCode="sys_role,role_name,id"
placeholder="请选择用户角色"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="任务状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="workStatus">
<!-- <a-input-number v-model="model.workStatus" placeholder="请输入任务状态" style="width: 100%" />-->
<j-dict-select-tag v-model="model.workStatus" dict-code="work_status"
placeholder="请输入任务状态" style="width: 100%" />
<a-form-model-item
label="责任人"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="managerUsers"
>
<!-- <a-input v-model="model.managerUsers" placeholder="请输入责任人" ></a-input>-->
<j-select-user-by-dep v-model="model.managerUsers" />
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="发布时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="publishTime">
<j-date placeholder="请选择发布时间" date-format="YYYY-MM-DD HH:mm:ss" v-model="model.publishTime" style="width: 100%" />
<a-form-model-item
label="任务时长"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="duration"
>
<a-input-number
:min="0.1"
:max="16"
:precision="1"
v-model="model.duration"
placeholder="请输入任务时长"
style="width: 100%"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="任务时长" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="duration">
<a-input-number :min="0.1" :max="16" :precision="1" v-model="model.duration" placeholder="请输入任务时长" style="width: 100%"/>
<a-form-model-item
label="实际时长"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="realDuration"
>
<!-- <a-input-number v-model="model.realDuration" placeholder="请输入实际时长" style="width: 100%" />-->
<a-input-number
:min="0.1"
:max="16"
:precision="1"
v-model="model.realDuration"
placeholder="请输入实际时长"
style="width: 100%"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="开始时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="startTime">
<j-date placeholder="请选择开始时间" date-format="YYYY-MM-DD HH:mm:ss" v-model="model.startTime" style="width: 100%" />
<a-form-model-item
label="开始时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="startTime"
>
<j-date
placeholder="请选择开始时间"
date-format="YYYY-MM-DD HH:mm:ss"
v-model="model.startTime"
style="width: 100%"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="提交时间" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="submitTime">
<j-date placeholder="请选择提交时间" date-format="YYYY-MM-DD HH:mm:ss" v-model="model.submitTime" style="width: 100%" />
<a-form-model-item
label="提交时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="submitTime"
>
<j-date
placeholder="请选择提交时间"
date-format="YYYY-MM-DD HH:mm:ss"
v-model="model.submitTime"
style="width: 100%"
/>
</a-form-model-item>
</a-col>
<!-- <a-col :span="24">-->
<!-- <a-form-model-item label="关联实体" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="relatedBean">-->
<!-- <j-dict-select-tag v-model="model.relatedBean" dict-code="tablex,table_name,id"-->
<!-- placeholder="请输入关联实体" ></j-dict-select-tag>-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<a-col :span="24">
<a-form-model-item label="实际时长" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="realDuration">
<!-- <a-input-number v-model="model.realDuration" placeholder="请输入实际时长" style="width: 100%" />-->
<a-input-number :min="0.1" :max="16" :precision="1" v-model="model.realDuration" placeholder="请输入实际时长" style="width: 100%"/>
<a-form-model-item
label="发布时间"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="publishTime"
>
<j-date
placeholder="请选择发布时间"
date-format="YYYY-MM-DD HH:mm:ss"
v-model="model.publishTime"
style="width: 100%"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="用户角色" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="userRole">
<!-- <a-input v-model="model.userRole" placeholder="请输入用户角色" ></a-input>-->
<j-multi-select-tag type="list_multi" v-model="model.userRole" dictCode="sys_role,role_name,id" placeholder="请选择用户角色" />
<a-form-model-item
label="版本状态"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="verisonStatus"
>
<!-- <a-input-number v-model="model.verisonStatus" placeholder="请输入版本状态" style="width: 100%" />-->
<j-dict-select-tag
type="radioButton"
v-model="model.verisonStatus"
dict-code="verison_status"
placeholder="请输入版本状态"
/>
</a-form-model-item>
</a-col>
<!-- <a-col :span="24">-->
<!-- <a-form-model-item label="关联实体" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="relatedBean">-->
<!-- <j-dict-select-tag v-model="model.relatedBean" dict-code="tablex,table_name,id"-->
<!-- placeholder="请输入关联实体" ></j-dict-select-tag>-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<a-col :span="24">
<a-form-model-item label="原型图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="prototypes">
<!-- <a-input v-model="model.prototypes" placeholder="请输入原型图" ></a-input>-->
<j-image-upload isMultiple v-model="model.prototypes" ></j-image-upload>
<!-- <a-col :span="24">-->
<!-- <a-form-model-item label="版本号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="verison">-->
<!-- <a-input-number v-model="model.verison" placeholder="请输入版本号" style="width: 100%" />-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
<a-col :span="24" style="height: 3rem">
<a-form-model-item
label="任务状态"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="workStatus"
>
<!-- <a-input-number v-model="model.workStatus" placeholder="请输入任务状态" style="width: 100%" />-->
<j-dict-select-tag
type="radio"
v-model="model.workStatus"
dict-code="work_status"
placeholder="请输入任务状态"
style="width: 100%"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="分析图" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="diagrams">
<!-- <a-input v-model="model.diagrams" placeholder="请输入分析图" ></a-input>-->
<j-image-upload isMultiple v-model="model.diagrams" ></j-image-upload>
<a-form-model-item
label="模块状态"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="status"
>
<!-- <a-input-number v-model="model.status" placeholder="请输入模块状态" style="width: 100%" />-->
<j-dict-select-tag
type="radio"
v-model="model.status"
placeholder="请输入模块状态"
dict-code="a_status"
/>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="模块状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="status">
<!-- <a-input-number v-model="model.status" placeholder="请输入模块状态" style="width: 100%" />-->
<j-dict-select-tag type="radio" v-model="model.status" placeholder="请输入模块状态" dict-code="a_status" />
</a-row>
<a-row>
<a-col :span="24" class="content_describe">
<a-form-model-item
label="内容描述"
:labelCol="labelCol"
:wrapperCol="wrapperCol"
prop="pmDescribe"
>
<j-editor v-model="model.pmDescribe"></j-editor>
</a-form-model-item>
</a-col>
<a-col :span="24">
<a-form-model-item label="版本状态" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="verisonStatus">
<!-- <a-input-number v-model="model.verisonStatus" placeholder="请输入版本状态" style="width: 100%" />-->
<j-dict-select-tag type="radioButton" v-model="model.verisonStatus" dict-code="verison_status"
placeholder="请输入版本状态"/>
</a-row>
<a-row>
<a-col style="width: 100%">
<a-form-model-item
label="原型图"
:labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
:wrapperCol="{ xs: { span: 24 }, sm: { span: 20 } }"
prop="prototypes"
>
<!-- <a-input v-model="model.prototypes" placeholder="请输入原型图" ></a-input>-->
<j-image-upload
isMultiple
v-model="model.prototypes"
></j-image-upload>
</a-form-model-item>
</a-col>
<!-- <a-col :span="24">-->
<!-- <a-form-model-item label="版本号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="verison">-->
<!-- <a-input-number v-model="model.verison" placeholder="请输入版本号" style="width: 100%" />-->
<!-- </a-form-model-item>-->
<!-- </a-col>-->
</a-row>
<a-row>
<a-col style="width: 100%">
<a-form-model-item
label="分析图"
:labelCol="{ xs: { span: 24 }, sm: { span: 2 } }"
:wrapperCol="{ xs: { span: 24 }, sm: { span: 20 } }"
prop="diagrams"
>
<!-- <a-input v-model="model.diagrams" placeholder="请输入分析图" ></a-input>-->
<j-image-upload
isMultiple
v-model="model.diagrams"
></j-image-upload>
</a-form-model-item> </a-col
></a-row>
</a-form-model>
</j-form-container>
</a-spin>
</template>
<script>
import { httpAction, getAction } from '@api/manage'
import { validateDuplicateValue } from '@/utils/util'
import moment from 'dayjs'
import { httpAction, getAction } from '@api/manage'
import { validateDuplicateValue } from '@/utils/util'
import moment from "dayjs";
export default {
name: 'ModulexForm',
components: {
},
props: {
//
disabled: {
type: Boolean,
default: false,
required: false
export default {
name: 'ModulexForm',
components: {},
props: {
//
disabled: {
type: Boolean,
default: false,
required: false
}
},
data() {
return {
model: {
workLevel: 2,
workStatus: 0,
duration: 1,
submitTime: moment(new Date()).format('YYYY-MM-DD HH:mm:ss'),
realDuration: 16,
status: 1,
verisonStatus: 1
},
labelCol: {
xs: { span: 24 },
sm: { span: 5 }
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 }
},
confirmLoading: false,
validatorRules: {
projectId: [{ required: true, message: '请输入项目id!' }],
moduleName: [{ required: true, message: '请输入中文名称!' }],
moduleEnName: [{ required: true, message: '请输入英文名称!' }],
moduleCode: [{ required: true, message: '请输入模块编码!' }],
workLevel: [{ required: true, message: '请输入任务等级!' }],
workStatus: [{ required: true, message: '请输入任务状态!' }],
duration: [{ required: true, message: '请输入任务时长!' }],
realDuration: [{ required: true, message: '请输入实际时长!' }],
status: [{ required: true, message: '请输入模块状态!' }],
verisonStatus: [{ required: true, message: '请输入版本状态!' }],
verison: [{ required: true, message: '请输入版本号!' }]
},
url: {
add: '/modulex/modulex/add',
edit: '/modulex/modulex/edit',
queryById: '/modulex/modulex/queryById'
}
}
},
computed: {
formDisabled() {
return this.disabled
}
},
created() {
//model
this.modelDefault = JSON.parse(JSON.stringify(this.model))
},
methods: {
add() {
this.edit(this.modelDefault)
},
data () {
return {
model:{
workLevel: 2,
workStatus: 0,
duration: 1,
submitTime: moment(new Date()).format("YYYY-MM-DD HH:mm:ss"),
realDuration: 16,
status: 1,
verisonStatus: 1,
},
labelCol: {
xs: { span: 24 },
sm: { span: 5 },
},
wrapperCol: {
xs: { span: 24 },
sm: { span: 16 },
},
confirmLoading: false,
validatorRules: {
projectId: [
{ required: true, message: '请输入项目id!'},
],
moduleName: [
{ required: true, message: '请输入中文名称!'},
],
moduleEnName: [
{ required: true, message: '请输入英文名称!'},
],
moduleCode: [
{ required: true, message: '请输入模块编码!'},
],
workLevel: [
{ required: true, message: '请输入任务等级!'},
],
workStatus: [
{ required: true, message: '请输入任务状态!'},
],
duration: [
{ required: true, message: '请输入任务时长!'},
],
realDuration: [
{ required: true, message: '请输入实际时长!'},
],
status: [
{ required: true, message: '请输入模块状态!'},
],
verisonStatus: [
{ required: true, message: '请输入版本状态!'},
],
verison: [
{ required: true, message: '请输入版本号!'},
],
},
url: {
add: "/modulex/modulex/add",
edit: "/modulex/modulex/edit",
queryById: "/modulex/modulex/queryById"
}
edit(record) {
this.model = Object.assign({}, record)
if (this.model.fuzhi) {
this.model.id = null
this.model.moduleName = this.model.moduleName + '+1'
this.model.moduleEnName = this.model.moduleEnName + '+1'
this.model.moduleCode = this.model.moduleCode + '+1'
this.model.createTime = null
}
this.visible = true
},
computed: {
formDisabled(){
return this.disabled
},
},
created () {
//model
this.modelDefault = JSON.parse(JSON.stringify(this.model));
},
methods: {
add () {
this.edit(this.modelDefault);
},
edit (record) {
this.model = Object.assign({}, record);
if (this.model.fuzhi){
this.model.id = null;
this.model.moduleName = this.model.moduleName + '+1';
this.model.moduleEnName = this.model.moduleEnName + '+1';
this.model.moduleCode = this.model.moduleCode + '+1';
this.model.createTime = null;
//id
this.model.copyId = record.id;
}
this.visible = true;
},
submitForm () {
const that = this;
//
this.$refs.form.validate(valid => {
if (valid) {
that.confirmLoading = true;
let httpurl = '';
let method = '';
if(!this.model.id){
httpurl+=this.url.add;
method = 'post';
}else{
httpurl+=this.url.edit;
method = 'put';
}
httpAction(httpurl,this.model,method).then((res)=>{
if(res.success){
that.$message.success(res.message);
that.$emit('ok');
}else{
that.$message.warning(res.message);
submitForm() {
const that = this
//
this.$refs.form.validate((valid) => {
if (valid) {
that.confirmLoading = true
let httpurl = ''
let method = ''
if (!this.model.id) {
httpurl += this.url.add
method = 'post'
} else {
httpurl += this.url.edit
method = 'put'
}
httpAction(httpurl, this.model, method)
.then((res) => {
if (res.success) {
that.$message.success(res.message)
that.$emit('ok')
} else {
that.$message.warning(res.message)
}
}).finally(() => {
that.confirmLoading = false;
})
}
})
},
.finally(() => {
that.confirmLoading = false
})
}
})
}
}
</script>
}
</script>
<style lang="less" scoped>
.ant-col {
width: 50%;
}
/deep/.ant-col-sm-16 {
width: 70%;
}
.ant-col-sm-5 {
width: 0%;
}
.content_describe {
width: 100%;
.ant-col-sm-5 {
width: 10% I;
}
/deep/ .ant-col-sm-16 {
width: 85%;
}
}
/deep/.ant-form-item-label {
width: 5rem;
height: 2rem;
text-align: right;
// background-color: aquamarine;
}
/deep/.ant-radio-wrapper {
margin-bottom: 0.5rem;
margin-right: 0.8rem;
}
</style>

Loading…
Cancel
Save