435 lines
17 KiB
Vue
435 lines
17 KiB
Vue
<template>
|
|
<a-spin :spinning="loading">
|
|
<JFormContainer :disabled="disabled">
|
|
<template #detail>
|
|
<a-form class="antd-modal-form" labelAlign="left" v-bind="formItemLayout" name="BgTakepulseForm" ref="formRef">
|
|
<a-row class="form-content-row" :gutter="[12, 4]">
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="年份" v-bind="validateInfos.year" id="BgTakepulseForm-year" name="year">
|
|
<j-dict-select-tag v-model:value="formData.year" dictCode="super_year" placeholder="请选择年份" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="密级" v-bind="validateInfos.secretLevel" id="BgTakepulseForm-secretLevel" name="secretLevel">
|
|
<j-dict-select-tag v-model:value="formData.secretLevel" dictCode="secret_level" placeholder="请选择密级" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="序号" v-bind="validateInfos.number" id="BgTakepulseForm-number" name="number">
|
|
<a-input v-model:value="formData.number" placeholder="请输入序号" allow-clear ></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="会议类型" v-bind="validateInfos.taskType" id="BgTakepulseForm-taskType" name="taskType">
|
|
<j-dict-select-tag v-model:value="formData.taskType" dictCode="super_takepulse_type" placeholder="请选择会议类型：行政线、技术线" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="类别" v-bind="validateInfos.type" id="BgTakepulseForm-type" name="type">
|
|
<a-input v-model:value="formData.type" placeholder="请输入类别：如党的建设" allow-clear ></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="提出人" v-bind="validateInfos.proposer" id="BgTakepulseForm-proposer" name="proposer">
|
|
<j-select-user v-model:value="formData.proposer" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="意见主题" v-bind="validateInfos.title" id="BgTakepulseForm-title" name="title">
|
|
<a-input v-model:value="formData.title" placeholder="请输入意见主题" allow-clear ></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="具体意见" v-bind="validateInfos.content" id="BgTakepulseForm-content" name="content">
|
|
<a-textarea v-model:value="formData.content" :rows="4" placeholder="请输入具体意见" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="责任领导" v-bind="validateInfos.suoleader" id="BgTakepulseForm-suoleader" name="suoleader">
|
|
<j-select-user v-model:value="formData.suoleader" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="牵头部门" v-bind="validateInfos.responDeptid" id="BgTakepulseForm-responDeptid" name="responDeptid">
|
|
<sz-select-dept v-model:value="formData.responDeptid" :multiple="true" checkStrictly allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="协办部门" v-bind="validateInfos.assistDeptid" id="BgTakepulseForm-assistDeptid" name="assistDeptid">
|
|
<sz-select-dept v-model:value="formData.assistDeptid" :multiple="true" checkStrictly allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="落实部门" v-bind="validateInfos.implementDeptid" id="BgTakepulseForm-implementDeptid" name="implementDeptid">
|
|
<a-input v-model:value="formData.implementDeptid" placeholder="请输入落实部门" allow-clear ></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="是否采纳" v-bind="validateInfos.isAdopt" id="BgTakepulseForm-isAdopt" name="isAdopt">
|
|
<j-switch v-model:value="formData.isAdopt" ></j-switch>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-form-item label="落实措施/解释说明" v-bind="validateInfos.measure" id="BgTakepulseForm-measure" name="measure" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
|
|
<a-textarea v-model:value="formData.measure" :rows="4" placeholder="请输入落实措施/解释说明" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="措施数量" v-bind="validateInfos.measureNumber" id="BgTakepulseForm-measureNumber" name="measureNumber">
|
|
<a-input-number v-model:value="formData.measureNumber" placeholder="请输入措施数量" style="width: 100%" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-form-item label="成果形式" v-bind="validateInfos.achievement" id="BgTakepulseForm-achievement" name="achievement" :labelCol="wideLabelCol" :wrapperCol="wideWrapperCol">
|
|
<a-textarea v-model:value="formData.achievement" :rows="4" placeholder="请输入成果形式" />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="要求完成日期" v-bind="validateInfos.deadline" id="BgTakepulseForm-deadline" name="deadline">
|
|
<a-date-picker placeholder="请选择要求完成日期" v-model:value="formData.deadline" value-format="YYYY-MM-DD" style="width: 100%" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="备注" v-bind="validateInfos.remark" id="BgTakepulseForm-remark" name="remark">
|
|
<a-input v-model:value="formData.remark" placeholder="请输入备注" allow-clear ></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- <a-col :span="12">-->
|
|
<!-- <a-form-item label="执行情况" v-bind="validateInfos.actualExect" id="BgTakepulseForm-actualExect" name="actualExect">-->
|
|
<!-- <a-textarea v-model:value="formData.actualExect" :rows="4" placeholder="请输入执行情况" />-->
|
|
<!-- </a-form-item>-->
|
|
<!-- </a-col>-->
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="实际完成时间" v-bind="validateInfos.actualTime" id="BgTakepulseForm-actualTime" name="actualTime">
|
|
<a-date-picker placeholder="请选择实际完成时间" v-model:value="formData.actualTime" showTime value-format="YYYY-MM-DD HH:mm:ss" style="width: 100%" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="提出人确认" v-bind="validateInfos.proposerConfirm" id="BgTakepulseForm-proposerConfirm" name="proposerConfirm">
|
|
<a-input v-model:value="formData.proposerConfirm" placeholder="请输入提出人确认" allow-clear ></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="完成状态" v-bind="validateInfos.bpmStatus" id="BgTakepulseForm-bpmStatus" name="bpmStatus">
|
|
<j-dict-select-tag v-model:value="formData.bpmStatus" dictCode="super_status" placeholder="请选择完成状态" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<!-- <a-col :span="12">-->
|
|
<!-- <a-form-item label="调整落实措施及执行情况" v-bind="validateInfos.actSt" id="BgTakepulseForm-actSt" name="actSt">-->
|
|
<!-- <a-textarea v-model:value="formData.actSt" :rows="4" placeholder="请输入调整落实措施及执行情况" />-->
|
|
<!-- </a-form-item>-->
|
|
<!-- </a-col>-->
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="督办次数" v-bind="validateInfos.superviseCount" id="BgTakepulseForm-superviseCount" name="superviseCount">
|
|
<a-input v-model:value="formData.superviseCount" placeholder="请输入督办次数" allow-clear ></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="是否急件" v-bind="validateInfos.urgencyLevel" id="BgTakepulseForm-urgencyLevel" name="urgencyLevel">
|
|
<j-dict-select-tag v-model:value="formData.urgencyLevel" dictCode="yn" placeholder="请选择是否急件" allow-clear />
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :xs="24" :md="12">
|
|
<a-form-item label="是否需要所办领导审批" v-bind="validateInfos.isNeedAppro" id="BgTakepulseForm-isNeedAppro" name="isNeedAppro">
|
|
<j-switch v-model:value="formData.isNeedAppro" ></j-switch>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col v-if="showSupDeptLeader" :xs="24" :md="12">
|
|
<a-form-item label="所办领导" v-bind="validateInfos.supDeptleaderid" id="BgTakepulseForm-supDeptleaderid" name="supDeptleaderid">
|
|
<DeptRoleUserSelectRadioGroup
|
|
v-model:value="formData.supDeptleaderid"
|
|
deptId="2044677604785229826"
|
|
roleId="2044680793306591234"
|
|
/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
</template>
|
|
</JFormContainer>
|
|
|
|
<div v-if="showFlowSubmitButton" :span="24" style="width: 100%;text-align: center;margin-top: 10px">
|
|
<a-button preIcon="ant-design:check-outlined" style="width: 126px" type="primary" @click="submitForm">提 交</a-button>
|
|
</div>
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, reactive, computed, toRaw, onMounted, watch } from 'vue';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import { queryDataById, saveOrUpdate } from '../BgTakepulse.api';
|
|
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
|
import JSwitch from '/@/components/Form/src/jeecg/components/JSwitch.vue';
|
|
import SzSelectDept from '/@/components/Form/src/jeecg/components/SzSelectDept.vue';
|
|
import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
|
|
import JFormContainer from '/@/components/Form/src/container/JFormContainer.vue';
|
|
import { Form } from 'ant-design-vue';
|
|
import DeptRoleUserSelectRadioGroup
|
|
from "@/components/semri/userComponent/DeptRoleUserSelectRadioGroup.vue";
|
|
const useForm = Form.useForm;
|
|
|
|
export default defineComponent({
|
|
name: "BgTakepulseForm",
|
|
components:{
|
|
DeptRoleUserSelectRadioGroup,
|
|
JDictSelectTag,
|
|
JSwitch,
|
|
SzSelectDept,
|
|
JSelectUser,
|
|
JFormContainer,
|
|
},
|
|
props:{
|
|
formDisabled:{
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
formData: { type: Object, default: ()=>{} },
|
|
formBpm: { type: Boolean, default: true }
|
|
},
|
|
emits:['success'],
|
|
setup(props, {emit}) {
|
|
const loading = ref(false);
|
|
const formRef = ref();
|
|
const formData = reactive<Record<string, any>>({
|
|
id: '',
|
|
secretLevel: '',
|
|
year: '',
|
|
number: '',
|
|
taskType: '',
|
|
type: '',
|
|
proposer: '',
|
|
title: '',
|
|
content: '',
|
|
suoleader: '',
|
|
responDeptid: '',
|
|
assistDeptid: '',
|
|
implementDeptid: '',
|
|
isAdopt: '',
|
|
measure: '',
|
|
measureNumber: undefined,
|
|
achievement: '',
|
|
deadline: '',
|
|
remark: '',
|
|
actualExect: '',
|
|
actualTime: '',
|
|
proposerConfirm: '',
|
|
bpmStatus: '',
|
|
actSt: '',
|
|
superviseCount: '',
|
|
urgencyLevel: '',
|
|
isNeedAppro: '',
|
|
supDeptleaderid: '',
|
|
delFlag: '',
|
|
});
|
|
|
|
const showSupDeptLeader = computed(() => formData.isNeedAppro === '1');
|
|
|
|
//表单验证
|
|
const validatorRules = reactive({
|
|
supDeptleaderid: [
|
|
{
|
|
validator: async (_rule, value) => {
|
|
if (showSupDeptLeader.value && !value) {
|
|
return Promise.reject('请选择所办领导');
|
|
}
|
|
return Promise.resolve();
|
|
},
|
|
},
|
|
],
|
|
});
|
|
const {resetFields, validate, validateInfos, clearValidate} = useForm(formData, validatorRules, {immediate: false});
|
|
const dbData = {};
|
|
const formItemLayout = {
|
|
labelCol: {xs: {span: 24}, sm: {span: 7}},
|
|
wrapperCol: {xs: {span: 24}, sm: {span: 17}},
|
|
};
|
|
const wideLabelCol = { xs: { span: 24 }, sm: { span: 3 } };
|
|
const wideWrapperCol = { xs: { span: 24 }, sm: { span: 21 } };
|
|
|
|
// 表单禁用
|
|
const disabled = computed(()=>{
|
|
if(props.formBpm === true){
|
|
if(props.formData.disabled === false){
|
|
return false;
|
|
}else{
|
|
return true;
|
|
}
|
|
}
|
|
return props.formDisabled;
|
|
});
|
|
|
|
// 不需要所办领导审批时，隐藏字段不能保留历史选择或校验错误。
|
|
function clearSupDeptLeaderIfNotNeeded() {
|
|
if (!showSupDeptLeader.value) {
|
|
formData.supDeptleaderid = '';
|
|
clearValidate(['supDeptleaderid']);
|
|
}
|
|
}
|
|
|
|
watch(() => formData.isNeedAppro, clearSupDeptLeaderIfNotNeeded);
|
|
|
|
onMounted(()=>{
|
|
initFormData();
|
|
});
|
|
//渲染流程表单数据
|
|
const queryByIdUrl = '/bqtakepulse/bgTakepulse/queryById';
|
|
async function initFormData(){
|
|
if(props.formBpm === true){
|
|
let params = {id: props.formData.dataId};
|
|
const row = await defHttp.get({url: queryByIdUrl, params});
|
|
//设置表单的值
|
|
Object.keys(row).map(k => {
|
|
formData[k] = row[k];
|
|
});
|
|
clearSupDeptLeaderIfNotNeeded();
|
|
}
|
|
}
|
|
// 是否显示提交按钮
|
|
const showFlowSubmitButton = computed(()=>{
|
|
if(props.formBpm === true){
|
|
if(props.formData.disabled === false){
|
|
return true
|
|
}
|
|
}
|
|
return false
|
|
});
|
|
|
|
|
|
function add() {
|
|
resetFields();
|
|
}
|
|
|
|
async function edit(row) {
|
|
await queryMainData(row.id);
|
|
}
|
|
|
|
async function queryMainData(id) {
|
|
const row = await queryDataById(id);
|
|
resetFields();
|
|
const tmpData = {};
|
|
Object.keys(formData).forEach((key) => {
|
|
if(row.hasOwnProperty(key)){
|
|
tmpData[key] = row[key]
|
|
}
|
|
})
|
|
//赋值
|
|
Object.assign(formData,tmpData);
|
|
clearSupDeptLeaderIfNotNeeded();
|
|
}
|
|
|
|
async function getFormData() {
|
|
try {
|
|
// 触发表单验证
|
|
await validate();
|
|
} catch ({ errorFields }) {
|
|
if (errorFields) {
|
|
const firstField = errorFields[0];
|
|
if (firstField) {
|
|
formRef.value.scrollToField(firstField.name, { behavior: 'smooth', block: 'center' });
|
|
}
|
|
}
|
|
return Promise.reject(errorFields);
|
|
}
|
|
return normalizeMainFormData(toRaw(formData))
|
|
}
|
|
|
|
function normalizeMainFormData(data) {
|
|
if (data) {
|
|
if (data.isNeedAppro !== '1') {
|
|
data.supDeptleaderid = '';
|
|
}
|
|
Object.keys(data).forEach((key) => {
|
|
if (Array.isArray(data[key])) {
|
|
data[key] = data[key].join(',');
|
|
}
|
|
});
|
|
}
|
|
return data;
|
|
}
|
|
|
|
async function submitForm() {
|
|
const mainData = await getFormData();
|
|
const values = Object.assign({}, dbData, mainData);
|
|
console.log('表单提交数据', values)
|
|
const isUpdate = values.id ? true : false
|
|
await saveOrUpdate(values, isUpdate);
|
|
//关闭弹窗
|
|
emit('success');
|
|
}
|
|
|
|
function setFieldsValue(values) {
|
|
if(values){
|
|
Object.keys(values).map(k=>{
|
|
formData[k] = values[k];
|
|
});
|
|
clearSupDeptLeaderIfNotNeeded();
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 值改变事件触发-树控件回调
|
|
* @param key
|
|
* @param value
|
|
*/
|
|
function handleFormChange(key, value) {
|
|
formData[key] = value;
|
|
}
|
|
|
|
|
|
return {
|
|
validatorRules,
|
|
validateInfos,
|
|
loading,
|
|
formData,
|
|
setFieldsValue,
|
|
handleFormChange,
|
|
formItemLayout,
|
|
wideLabelCol,
|
|
wideWrapperCol,
|
|
disabled,
|
|
showSupDeptLeader,
|
|
showFlowSubmitButton,
|
|
getFormData,
|
|
submitForm,
|
|
add,
|
|
edit,
|
|
formRef,
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.antd-modal-form {
|
|
:deep(.ant-form-item-label) {
|
|
padding-bottom: 0;
|
|
text-align: left;
|
|
}
|
|
|
|
:deep(.ant-form-item-label > label) {
|
|
width: 100%;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
:deep(.ant-form-item-control),
|
|
:deep(.ant-form-item-control-input),
|
|
:deep(.ant-form-item-control-input-content) {
|
|
text-align: left;
|
|
}
|
|
}
|
|
|
|
.form-content-row {
|
|
:deep(.ant-form-item) {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
:deep(.ant-input),
|
|
:deep(.ant-input-affix-wrapper),
|
|
:deep(.ant-input-number),
|
|
:deep(.ant-picker),
|
|
:deep(.ant-select-selector) {
|
|
min-height: 30px;
|
|
}
|
|
}
|
|
</style>
|