528 lines
17 KiB
Vue
528 lines
17 KiB
Vue
<template>
|
||
<a-spin :spinning="loading" >
|
||
<a-form v-bind="formItemLayout">
|
||
<a-row>
|
||
<a-col :span="12">
|
||
<a-form-item label="版本" v-bind="validateInfos.title" >
|
||
{{ formData.title }}
|
||
</a-form-item>
|
||
</a-col>
|
||
<a-col :span="12">
|
||
<a-form-item label="课程类型" v-bind="validateInfos.twoTitle"> （{{ oldInfo.twoTitle_dictText }}） </a-form-item>
|
||
</a-col>
|
||
|
||
</a-row>
|
||
</a-form>
|
||
<!--
|
||
单行文本 1
|
||
多行文本 2
|
||
富文本 3
|
||
固定表单（基础信息） 4
|
||
关联表格 5
|
||
自增单行文本 6
|
||
自增富文本 7
|
||
自增多行文本 8
|
||
自增表格 9
|
||
自增表格（两列关联）10
|
||
-->
|
||
<a-row>
|
||
<a-col :span="24" v-for="(item, index) in zyJxdgMainTable.dataSource" :key="index" style="border:1px solid #f5f5f5;margin:5px 0; background:#fbfbfb;border-radius:5px;" >
|
||
<a-row>
|
||
<a-col :span="24" style="height:50px; background-color:#f5f7fa;border-left:3px solid #19a789;">
|
||
<span class="title">{{ item.title }}</span>
|
||
</a-col>
|
||
<!-- 单行文本 1 -->
|
||
<a-col v-if="item.type === '1'" :span="24">
|
||
<a-input placeholder="请输入内容" v-model:value="item.content" style="width: 100%"></a-input>
|
||
</a-col>
|
||
<!-- 多行文本 2 -->
|
||
<a-col v-else-if="item.type === '2'" :span="24">
|
||
<a-textarea placeholder="请输入内容" v-model:value="item.content" style="width: 100%"></a-textarea>
|
||
</a-col>
|
||
<!-- 富文本 3 -->
|
||
<a-col v-else-if="item.type === '3'" :span="24">
|
||
<j-editor placeholder="请输入内容" v-model:value="item.content" :disabled="disabled" />
|
||
</a-col>
|
||
<!-- 固定表单（基础信息） 4 -->
|
||
<a-col v-else-if="item.type === '4'" v-model:value="item.content" :span="24">
|
||
<a-form v-bind="formItemLayout">
|
||
<a-row>
|
||
<a-col v-for="(item2, index2) in item.zyJxdgPzxxList" :key="index2" :span="12">
|
||
<a-form-item :label="item2.title"><a-input :placeholder="`请输入` + item2.title" v-model:value="item2.content" /></a-form-item>
|
||
<!-- {{ item2.title }}:<a-input placeholder="请输入内容" style="width:60%;"></a-input> -->
|
||
</a-col>
|
||
</a-row>
|
||
</a-form>
|
||
</a-col>
|
||
<!-- 自增表格 5 -->
|
||
<a-col v-else-if="item.type === '5'" :span="24">
|
||
<a-table :columns="getTableColumns(item.zyJxdgPzxxList)" :dataSource="item.list" :pagination="false">
|
||
<template #bodyCell="{ column, record }">
|
||
<a-input placeholder="请输入内容" v-model:value="record[column.key]" style="width: 80%"></a-input>
|
||
<!-- <template v-if="column.key === 'name'">
|
||
</template> -->
|
||
</template>
|
||
</a-table>
|
||
</a-col>
|
||
<!-- 自增单行文本 6 -->
|
||
<a-col v-else-if="item.type === '6'" :span="24">
|
||
<a-row>
|
||
<a-col>
|
||
<a-button type="primary" @click="handleDhwb(item)" class="increase">添加</a-button>
|
||
</a-col>
|
||
<a-col v-for="(item2, index2) in item.list" :key="index2">
|
||
<a-input placeholder="请输入内容" v-model:value="item2.title" style="width: 80%; margin:10px 10px 10px 15px;" @blur="handleGlxm(item)"></a-input>
|
||
<a-button type="danger" @click="handleDhwbDel(item, index2)">删除</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
<!-- 自增富文本 7 -->
|
||
<a-col v-else-if="item.type === '7'" :span="24">
|
||
<a-row>
|
||
<a-col>
|
||
<a-button type="primary" @click="handleDhfwb(item)" class="increase" >添加</a-button>
|
||
</a-col>
|
||
<a-col v-for="(item2, index2) in item.list" :key="index2">
|
||
<j-editor placeholder="请输入内容" v-model:value="item2.title" :disabled="disabled" style="width: 500px; height: 200px" />
|
||
<a-button type="danger" @click="handleDhfwbDel(item, index2)" style="margin-top:10px"></a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
<!-- 自增多行文本 8 -->
|
||
<a-col v-else-if="item.type === '8'" :span="24">
|
||
<a-row>
|
||
<a-col>
|
||
<a-button type="primary" @click="handleDhwbArea(item)" class="increase">添加</a-button>
|
||
</a-col>
|
||
<a-col v-for="(item2, index2) in item.list" :key="index2" style="text-align:right;" >
|
||
<a-textarea placeholder="请输入内容" v-model:value="item2.title" :disabled="disabled" />
|
||
<a-button type="danger" @click="handleDhwbAreaDel(item, index2)" class="place-dele">删除</a-button>
|
||
</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
|
||
<!-- 自增表格 9 -->
|
||
<a-col v-else-if="item.type === '9'" :span="24">
|
||
<div><a-button type="primary" @click="handleZzbg(item)" class="increase">新增</a-button> </div>
|
||
<a-table :columns="getTableZzColumns(item.zyJxdgPzxxList)" :dataSource="item.list" :pagination="false">
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'action'">
|
||
<a-button type="danger" @click="handleZzbgDel(item.list, record.sort)">删除</a-button>
|
||
</template>
|
||
<template v-else>
|
||
<a-input placeholder="请输入内容" v-model:value="record[column.key]" style="width: 100%"></a-input>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</a-col>
|
||
<!-- 自增表格（两列关联） 10 -->
|
||
<a-col v-else-if="item.type === '10'" :span="24">
|
||
<div><a-button type="primary" @click="handleZzbg(item)" class="increase">新增</a-button> </div>
|
||
<a-table :columns="getTableZzColumns(item.zyJxdgPzxxList)" :dataSource="item.list" :pagination="false">
|
||
<template #bodyCell="{ column, record }">
|
||
<template v-if="column.key === 'action'">
|
||
<a-button type="danger" @click="handleZzbgDel(item.list, record.sort)">删除</a-button>
|
||
</template>
|
||
<template v-else>
|
||
<a-input placeholder="请输入内容" v-model:value="record[column.key]" @blur="handleTwoGlxm(item)" style="width: 100%"></a-input>
|
||
</template>
|
||
</template>
|
||
</a-table>
|
||
</a-col>
|
||
|
||
<a-col v-else> </a-col>
|
||
|
||
<a-col :span="24">
|
||
<span class="tishi">
|
||
<span>{{ item.tsy }}</span>
|
||
</span>
|
||
</a-col>
|
||
</a-row>
|
||
</a-col>
|
||
</a-row>
|
||
</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, saveOrUpdate2 } 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';
|
||
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
|
||
|
||
const useForm = Form.useForm;
|
||
|
||
export default defineComponent({
|
||
name: 'ZyJxdgBanbenForm',
|
||
components: {
|
||
JDictSelectTag,
|
||
JVxeTable,
|
||
JEditor,
|
||
},
|
||
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 oldInfo = 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({});
|
||
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
|
||
const dbData = {};
|
||
const formItemLayout = {
|
||
labelCol: { xs: { span: 24 }, sm: { span: 8 } },
|
||
wrapperCol: { xs: { span: 24 }, sm: { span: 13 } },
|
||
};
|
||
const columns = [];
|
||
|
||
// 表单禁用
|
||
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) {
|
||
oldInfo.value = 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 alllist = zyJxdgMainTable.dataSource;
|
||
console.log('✋', alllist);
|
||
|
||
var values = {
|
||
id: '',
|
||
rwbh: '202320242000629',
|
||
banbenId: oldInfo.value.id,
|
||
teacherNo: '2002900106',
|
||
sffb: '0',
|
||
list: alllist,
|
||
};
|
||
// const mainData = await getFormData();
|
||
// const subData = zyJxdgMainTable.dataSource;
|
||
// const values = Object.assign({}, dbData, mainData);
|
||
// values.zyJxdgMainList = subData;
|
||
console.log('表单提交数据', values);
|
||
const isUpdate = values.id ? true : false;
|
||
await saveOrUpdate2(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 handleDhwb(item) {
|
||
item.list = item.list || [];
|
||
item.list.push({
|
||
title: '',
|
||
sort: item.list.length + 1,
|
||
});
|
||
}
|
||
//删除单行文本
|
||
function handleDhwbDel(item, index) {
|
||
item.list.splice(index, 1);
|
||
for (var i = 0; i < item.list.length; i++) {
|
||
item.list[i].sort = i;
|
||
}
|
||
}
|
||
|
||
//新增多行富文本
|
||
function handleDhfwb(item) {
|
||
item.list = item.list || [];
|
||
item.list.push({
|
||
title: '',
|
||
sort: item.list.length + 1,
|
||
});
|
||
}
|
||
//删除多行富文本
|
||
function handleDhfwbDel(item, index) {
|
||
item.list.splice(index, 1);
|
||
for (var i = 0; i < item.list.length; i++) {
|
||
item.list[i].sort = i;
|
||
}
|
||
}
|
||
|
||
//新增多行富文本
|
||
function handleDhwbArea(item) {
|
||
item.list = item.list || [];
|
||
item.list.push({
|
||
title: '',
|
||
sort: item.list.length + 1,
|
||
});
|
||
}
|
||
//删除多行富文本
|
||
function handleDhwbAreaDel(item, index) {
|
||
item.list.splice(index, 1);
|
||
for (var i = 0; i < item.list.length; i++) {
|
||
item.list[i].sort = i;
|
||
}
|
||
}
|
||
|
||
//新增自增表格
|
||
function handleZzbg(item) {
|
||
item.list = item.list || [];
|
||
item.list.push({
|
||
title: '',
|
||
sort: item.list.length,
|
||
});
|
||
}
|
||
//删除自增表格
|
||
function handleZzbgDel(list, record) {
|
||
console.log('😁', list, record);
|
||
list.splice(record, 1);
|
||
for (var i = 0; i < list.length; i++) {
|
||
list[i].sort = i;
|
||
}
|
||
}
|
||
|
||
//获取列表列表头
|
||
function getTableColumns(list) {
|
||
let columns = reactive<any>([]);
|
||
for (var i = 0; i < list.length; i++) {
|
||
var par = list[i];
|
||
var inePar = {
|
||
title: par.title,
|
||
dataIndex: par.id,
|
||
key: par.id,
|
||
};
|
||
columns.push(inePar);
|
||
}
|
||
return columns;
|
||
}
|
||
|
||
//获取自增列表列表头
|
||
function getTableZzColumns(list) {
|
||
let columns = reactive<any>([]);
|
||
for (var i = 0; i < list.length; i++) {
|
||
var par = list[i];
|
||
var inePar = {
|
||
title: par.title,
|
||
dataIndex: par.id,
|
||
key: par.id,
|
||
};
|
||
columns.push(inePar);
|
||
}
|
||
var inePar2 = {
|
||
title: '操作',
|
||
dataIndex: 'action',
|
||
key: 'action',
|
||
};
|
||
columns.push(inePar2);
|
||
return columns;
|
||
}
|
||
//关联项目计算方法
|
||
function handleGlxm(item) {
|
||
console.log('👩🍳item', item);
|
||
var sfsglxm = item.sfsglxm;
|
||
if (sfsglxm == '1') {
|
||
//判断是否是关联项目
|
||
var list1 = item.list; //课程目标集合
|
||
console.log('👨🔧list1', list1);
|
||
if (list1 != null) {
|
||
//关联项目是否有值
|
||
var sort = item.sort; //第几个关联项目
|
||
console.log('💆♂️sort', sort);
|
||
var alllist = zyJxdgMainTable.dataSource; //获取全部的数据
|
||
console.log('🧜♂️alllist', alllist);
|
||
for (var j = 0; j < alllist.length; j++) {
|
||
for (var i = 0; i < list1.length; i++) {
|
||
var item1 = list1[i];
|
||
var title = item1.title; //具体信息
|
||
var item2 = alllist[j]; //具体数据
|
||
item2.list = item2.list || [];
|
||
if (item2.guanlian == sort) {
|
||
//关联项目等于当前数据
|
||
if (i == 0) {
|
||
//判断第一回将原来的清空重新赋值
|
||
item2.list = [];
|
||
}
|
||
//判断当前项是否等于关联项
|
||
var item3 = item2.zyJxdgPzxxList;
|
||
if (item3 != null && item3.length > 0) {
|
||
item2.list.push({ [item3[0].id]: title });
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
//两列关联项目计算方法
|
||
function handleTwoGlxm(item) {
|
||
var sfsglxm = item.sfsglxm;
|
||
if (sfsglxm == '1') {
|
||
//判断是否是关联项目
|
||
var list1 = item.list; //课程目标集合
|
||
if (list1 != null) {
|
||
//关联项目是否有值
|
||
var sort = item.sort; //第几个关联项目
|
||
var alllist = zyJxdgMainTable.dataSource; //获取全部的数据
|
||
for (var j = 0; j < alllist.length; j++) {
|
||
for (var i = 0; i < list1.length; i++) {
|
||
var item1 = list1[i];
|
||
var item2 = alllist[j]; //具体数据
|
||
item2.list = item2.list || [];
|
||
|
||
if (item2.guanlian == sort) {
|
||
//判断当前项是否等于关联项
|
||
var item3 = item.zyJxdgPzxxList;
|
||
var item4 = item2.zyJxdgPzxxList;
|
||
console.log('🤐', item2);
|
||
console.log('🕵️♀️', item3);
|
||
|
||
var title1 = item1[item3[0].id];
|
||
var title2 = item1[item3[1].id];
|
||
console.log('🧜title', title1, title2);
|
||
//关联项目等于当前数据
|
||
if (i == 0) {
|
||
//判断第一回将原来的清空重新赋值
|
||
item2.list = [];
|
||
}
|
||
console.log('👶', item3);
|
||
if (item3 != null && item3.length > 0) {
|
||
item2.list.push({ [item4[0].id]: title1, [item4[1].id]: title2 });
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
return {
|
||
zyJxdgMainTableRef,
|
||
zyJxdgMainTable,
|
||
validatorRules,
|
||
validateInfos,
|
||
activeKey,
|
||
loading,
|
||
formData,
|
||
oldInfo,
|
||
setFieldsValue,
|
||
handleFormChange,
|
||
formItemLayout,
|
||
disabled,
|
||
getFormData,
|
||
submitForm,
|
||
add,
|
||
edit,
|
||
getTableColumns,
|
||
getTableZzColumns,
|
||
columns,
|
||
handleDhwb,
|
||
handleDhwbDel,
|
||
handleDhfwb,
|
||
handleDhfwbDel,
|
||
handleDhwbArea,
|
||
handleDhwbAreaDel,
|
||
handleGlxm,
|
||
handleZzbg,
|
||
handleZzbgDel,
|
||
handleTwoGlxm,
|
||
};
|
||
},
|
||
});
|
||
</script>
|
||
<style scoped lang="less" >
|
||
.title {
|
||
width: 80%;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
padding-left: 10px;
|
||
position: relative;
|
||
color: #333333;
|
||
line-height:50px;
|
||
}
|
||
.tishi {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
text-align: left;
|
||
margin: 5px;
|
||
margin: 10px 0;
|
||
}
|
||
.tishi span{
|
||
font-size: 12px;
|
||
color: #ff9924;
|
||
}
|
||
.increase{
|
||
position: absolute;
|
||
right:6px;
|
||
top:-41px;
|
||
}
|
||
.place-dele{
|
||
margin:10px 0;
|
||
}
|
||
</style> |