314 lines
11 KiB
Vue
314 lines
11 KiB
Vue
<template>
|
|
<a-spin :spinning="loading" >
|
|
<a-form v-bind="formItemLayout" style="background:#fafafa; border-radius: 10px; padding-top:20px; margin-bottom:10px;" >
|
|
<a-row>
|
|
<a-col :span="24">
|
|
<a-form-item label="版本" v-bind="validateInfos.title">
|
|
<a-input v-model:value="formData.title" placeholder="请输入版本" :disabled="disabled"></a-input>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-form-item label="课程类型" v-bind="validateInfos.twoTitle" >
|
|
<j-dict-select-tag type='list' v-model:value="formData.twoTitle" dictCode="kclx" placeholder="请选择课程类型" :disabled="disabled"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
<a-col :span="24">
|
|
<a-form-item label="是否发布" v-bind="validateInfos.sfsy">
|
|
<j-dict-select-tag type='radio' v-model:value="formData.sfsy" dictCode="yn" placeholder="请选择是否发布" :disabled="disabled"/>
|
|
</a-form-item>
|
|
</a-col>
|
|
</a-row>
|
|
</a-form>
|
|
|
|
<a-row>
|
|
<a-col :span="24" style="text-align:left;">
|
|
<a-button type="primary" @click="handleOneType" preIcon="ant-design:plus-outlined">新增项目</a-button>
|
|
<div style="background:#fff4e6; border:1px solid #ffe8ca; border-radius: 8px; padding:10px; margin:10px 0;">
|
|
<div style="font-weight: bold;">说明：</div>
|
|
<div class="explain-word">1.关联第几个项目：若根据某个项目自动生成关联关系，请选择指定项目！</div>
|
|
<div class="explain-word">2.是否是被关联项目：如果被其他项目关联，请选择是，否则不起效！</div>
|
|
<div class="explain-word">3.被关联项目禁用问题：目前只支持文本及表格进行关联，富文本、表单、多行文本不支持被关联！</div>
|
|
</div>
|
|
</a-col>
|
|
<a-col :span="24" v-for="(item,index) in zyJxdgMainTable.dataSource" :key="index" style="border:1px solid #f5f5f5;padding:10px;margin:5px 0; background:#fbfbfb;border-radius:5px;">
|
|
<a-row style="margin:10px;">
|
|
<a-col :span="6" style="padding-right:10px;">
|
|
<a-input v-model:value="item.title" placeholder="请输入标题" :disabled="disabled" class="input-title"/>
|
|
</a-col>
|
|
<a-col :span="6" style="padding-right:4px;">
|
|
<j-dict-select-tag type='list' v-model:value="item.type" dictCode="jxdglx" :disabled="disabled" style=" width: 100%;"/>
|
|
</a-col>
|
|
<a-col :span="6">
|
|
<a-select placeholder="请选择关联第几个项目" v-model:value="item.guanlian" :disabled="disabled" style="margin-left:-12px;width: 100%;">
|
|
<a-select-option value="">请选择关联第几个项目</a-select-option>
|
|
<a-select-option :value="peizhi.sort" v-for="(peizhi,index2) in zyJxdgMainTable.dataSource" :key="index2">{{peizhi.title}}</a-select-option>
|
|
</a-select>
|
|
</a-col>
|
|
<a-col :span="6">
|
|
<j-dict-select-tag type='select' v-model:value="item.sfsglxm" dictCode="yn" libelName="是否是被关联项目" :disabled="disabled || item.type == '2' || item.type == '3' || item.type == '4' || item.type == '7' || item.guanlian == '8' "/>
|
|
</a-col>
|
|
<a-col :span="21">
|
|
<a-input v-model:value="item.tsy" placeholder="请输入提示语" :disabled="disabled" class="Prompt-language" />
|
|
</a-col>
|
|
<a-col :span="3">
|
|
<a-button type="danger" @click="handleOneDel(item,index)" style="margin-left:10px">删除</a-button>
|
|
</a-col>
|
|
<!--
|
|
单行文本 1 a
|
|
多行文本 2
|
|
富文本 3
|
|
固定表单（基础信息） 4
|
|
关联表格 5 a
|
|
自增单行文本 6 a
|
|
自增富文本 7
|
|
自增多行文本 8
|
|
自增表格 9 a
|
|
自增表格（两列关联） 10 a
|
|
-->
|
|
<a-col v-if="item.type==='4' || item.type==='5' || item.type==='9'|| item.type==='10'">
|
|
<a-row>
|
|
<a-col :span="24" style="margin:15px 0 0px 0px;">
|
|
<a-button type="primary" @click="handleTwoType(item)" class="margin10" preIcon="ant-design:plus-outlined">新增字段</a-button>
|
|
</a-col>
|
|
<a-col :span="24" v-for="(twoItem,index2) in item.zyJxdgPzxxList" :key="index2">
|
|
<a-row>
|
|
<a-col :span="21">
|
|
<a-input v-model:value="twoItem.title" placeholder="请输入选项" :disabled="disabled" class="fields-add"/>
|
|
</a-col>
|
|
<a-col :span="3">
|
|
<a-button type="danger" @click="handleTwoDel(item,index2)" style="margin-left:10px">删除</a-button>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
</a-col>
|
|
</a-row>
|
|
|
|
<!-- 子表单区域 -->
|
|
<!-- <a-tabs v-model:activeKey="activeKey" animated>
|
|
<a-tab-pane tab="教学大纲配置信息" key="zyJxdgMain" :forceRender="true">
|
|
<j-vxe-table
|
|
:keep-source="true"
|
|
resizable
|
|
ref="zyJxdgMainTableRef"
|
|
:loading="zyJxdgMainTable.loading"
|
|
:columns="zyJxdgMainTable.columns"
|
|
:dataSource="zyJxdgMainTable.dataSource"
|
|
:height="340"
|
|
:disabled="disabled"
|
|
:rowNumber="true"
|
|
:rowSelection="true"
|
|
:toolbar="true"/>
|
|
</a-tab-pane>
|
|
</a-tabs> -->
|
|
</a-spin>
|
|
</template>
|
|
|
|
<script lang="ts">
|
|
import { defineComponent, ref, reactive, computed, toRaw, onMounted } from 'vue';
|
|
import { defHttp } from '/@/utils/http/axios';
|
|
import { useValidateAntFormAndTable } from '/@/hooks/system/useJvxeMethods';
|
|
import { queryZyJxdgMainListByMainId, queryDataById, saveOrUpdate } from '../ZyJxdgBanben.api';
|
|
import { JVxeTable } from '/@/components/jeecg/JVxeTable';
|
|
import {zyJxdgMainColumns} from '../ZyJxdgBanben.data';
|
|
import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
|
|
import { Form } from 'ant-design-vue';
|
|
const useForm = Form.useForm;
|
|
|
|
export default defineComponent({
|
|
name: "ZyJxdgBanbenForm",
|
|
components:{
|
|
JDictSelectTag,
|
|
JVxeTable,
|
|
},
|
|
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 zyJxdgMainTableRef = ref();
|
|
const zyJxdgMainTable = reactive<Record<string, any>>({
|
|
loading: false,
|
|
columns: zyJxdgMainColumns,
|
|
dataSource: []
|
|
});
|
|
const activeKey = ref('zyJxdgMain');
|
|
const formData = reactive<Record<string, any>>({
|
|
id: '',
|
|
title: '',
|
|
twoTitle: '',
|
|
sfsy: '',
|
|
});
|
|
|
|
//表单验证
|
|
const validatorRules = reactive({
|
|
title: [{ required: true, message: '请输入版本!'},],
|
|
sfsy: [{ required: true, message: '请输入是否使用!'},],
|
|
twoTitle: [{ required: true, message: '请输入是否使用!'},],
|
|
});
|
|
const {resetFields, validate, validateInfos} = useForm(formData, validatorRules, {immediate: true});
|
|
const dbData = {};
|
|
const formItemLayout = {
|
|
labelCol: {xs: {span: 24}, sm: {span: 5}},
|
|
wrapperCol: {xs: {span: 24}, sm: {span: 16}},
|
|
};
|
|
|
|
// 表单禁用
|
|
const disabled = computed(()=>{
|
|
if(props.formBpm === true){
|
|
if(props.formData.disabled === false){
|
|
return false;
|
|
}else{
|
|
return true;
|
|
}
|
|
}
|
|
return props.formDisabled;
|
|
});
|
|
|
|
|
|
|
|
function add() {
|
|
resetFields();
|
|
zyJxdgMainTable.dataSource = [];
|
|
}
|
|
|
|
async function edit(row) {
|
|
//主表数据
|
|
await queryMainData(row.id);
|
|
//子表数据
|
|
const zyJxdgMainDataList = await queryZyJxdgMainListByMainId(row['id']);
|
|
zyJxdgMainTable.dataSource = [...zyJxdgMainDataList];
|
|
}
|
|
|
|
async function queryMainData(id) {
|
|
const row = await queryDataById(id);
|
|
Object.keys(row).map(k => {
|
|
formData[k] = row[k];
|
|
});
|
|
}
|
|
|
|
const {getSubFormAndTableData, transformData} = useValidateAntFormAndTable(activeKey, {
|
|
'zyJxdgMain': zyJxdgMainTableRef,
|
|
});
|
|
|
|
async function getFormData() {
|
|
await validate();
|
|
return transformData(toRaw(formData))
|
|
}
|
|
|
|
async function submitForm() {
|
|
const mainData = await getFormData();
|
|
const subData = zyJxdgMainTable.dataSource;
|
|
console.log('主表数据11111', subData)
|
|
const values = Object.assign({}, dbData, mainData);
|
|
console.log('主表数据22222222', subData.value)
|
|
console.log('主表数据22222222', subData.target)
|
|
values.zyJxdgMainList = subData;
|
|
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];
|
|
});
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 值改变事件触发-树控件回调
|
|
* @param key
|
|
* @param value
|
|
*/
|
|
function handleFormChange(key, value) {
|
|
formData[key] = value;
|
|
}
|
|
|
|
|
|
function handleOneType(){
|
|
|
|
zyJxdgMainTable.dataSource.push({
|
|
title: '',
|
|
type: '',
|
|
guanlian:'',
|
|
sort:zyJxdgMainTable.dataSource.length+1,
|
|
});
|
|
}
|
|
|
|
function handleOneDel(item,index){
|
|
zyJxdgMainTable.dataSource.splice(index,1);
|
|
}
|
|
|
|
function handleTwoType(item){
|
|
item.zyJxdgPzxxList = item.zyJxdgPzxxList || [];
|
|
item.zyJxdgPzxxList.push({
|
|
title: '',
|
|
type: '',
|
|
sort:item.zyJxdgPzxxList.length+1,
|
|
});
|
|
}
|
|
function handleTwoDel(item,index){
|
|
item.zyJxdgPzxxList.splice(index,1);
|
|
}
|
|
|
|
|
|
return {
|
|
zyJxdgMainTableRef,
|
|
zyJxdgMainTable,
|
|
validatorRules,
|
|
validateInfos,
|
|
activeKey,
|
|
loading,
|
|
formData,
|
|
setFieldsValue,
|
|
handleFormChange,
|
|
formItemLayout,
|
|
disabled,
|
|
getFormData,
|
|
submitForm,
|
|
add,
|
|
edit,
|
|
handleOneType,
|
|
handleOneDel,
|
|
handleTwoType,
|
|
handleTwoDel,
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.margin10{
|
|
margin:10px 0;
|
|
}
|
|
.input-title{
|
|
margin-bottom: 10px;
|
|
color: #555;
|
|
}
|
|
.fields-add{
|
|
margin:0 0 10px 0;
|
|
color: #95989e;
|
|
border: 1px solid #e1e4eb;
|
|
border-radius: 4px;
|
|
}
|
|
.Prompt-language{
|
|
color: #bda787;
|
|
font-size:14px;
|
|
padding: 6px;
|
|
}
|
|
.explain-word{
|
|
color:#ff9924;
|
|
font-size:12px;
|
|
}
|
|
</style> |