Hooke / data-table

Go to a project
Toggle navigation Toggle navigation pinning
hookehuyr
10055536 1 parent 5f2c9665

移除非必要模块

Inline Side-by-side
Showing 5 changed files with 15 additions and 469 deletions
/*
* @Date: 2022-11-17 14:46:43
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-17 16:32:19
* @FilePath: /data-table/src/router/routes/modules/setForm/index.js
* @Description: 文件描述
*/
const index = [{
path: '/addForm',
name: '新增表单',
component: () => import('@/views/setForm/addForm.vue'),
meta: {
title: '新增表单',
name: 'addFormPage'
},
children: []
}, {
path: '/addField',
name: '新增表单字段',
component: () => import('@/views/setForm/addField.vue'),
meta: {
title: '新增表单字段',
name: 'addFieldPage'
},
children: []
}, {
path: '/setField',
name: '添加表单字段属性设置',
component: () => import('@/views/setForm/setField.vue'),
meta: {
title: '添加表单字段属性设置',
name: 'setFieldPage'
},
children: []
}]
export default index;
<!--
* @Date: 2022-07-18 10:22:22
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-12-09 14:22:28
* @LastEditTime: 2022-12-09 15:25:00
* @FilePath: /data-table/src/views/index.vue
* @Description: 首页
-->
......@@ -404,19 +404,20 @@ const onSubmit = async (values) => {
postData.value = _.assign(postData.value, rest_data);
// 检查非表单输入项
if (validOther().status) {
// 编辑模式不能提交数据
if (model === 'edit') return false;
// 通过验证
const result = await addFormDataAPI({
form_code: $route.query.code,
data: postData.value,
});
if (result.code) {
showSuccessToast("提交成功");
$router.push({
path: "/success",
});
}
console.warn(postData.value);
// // 编辑模式不能提交数据
// if (model === 'edit') return false;
// // 通过验证
// const result = await addFormDataAPI({
// form_code: $route.query.code,
// data: postData.value,
// });
// if (result.code) {
// showSuccessToast("提交成功");
// $router.push({
// path: "/success",
// });
// }
} else {
console.warn(validOther().key + "不通过验证");
// // 图片上传控件报错提示
......
<!--
* @Date: 2022-11-17 15:44:24
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-17 16:15:33
* @FilePath: /data-table/src/views/setForm/addField.vue
* @Description: 文件描述
-->
<template>
<div class="add-field">
<van-nav-bar title="添加表单字段" />
<van-form @submit="onSubmit" style="margin-top: 1rem">
<van-cell-group inset>
<van-field
v-model="form_name"
name="form_name"
is-link
readonly
label="表单名称"
placeholder="表单名称"
@click="showForm = true"
required
:rules="[{ required: true, message: '请选择表单名称' }]"
/>
<van-field
v-model="components_name"
name="components_name"
is-link
readonly
label="组件名称"
placeholder="组件名称"
@click="showComponents = true"
required
:rules="[{ required: true, message: '请选择组件名称' }]"
/>
</van-cell-group>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit">确认</van-button>
</div>
</van-form>
</div>
<van-popup v-model:show="showForm" round position="bottom">
<van-picker
:columns="formColumns"
@cancel="showForm = false"
@confirm="onFormConfirm"
/>
</van-popup>
<van-popup v-model:show="showComponents" round position="bottom">
<van-picker
:columns="componentsColumns"
@cancel="showComponents = false"
@confirm="onComponentsConfirm"
/>
</van-popup>
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addFormFieldAPI, queryFormAPI } from "@/api/form.js";
import { getComponentAPI } from "@/api/component.js";
import { showSuccessToast, showFailToast } from "vant";
import {
Cookies,
$,
_,
axios,
storeToRefs,
mainStore,
Toast,
useTitle,
} from "@/utils/generatePackage.js";
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const form_name = ref("");
const form_code = ref("");
const components_name = ref("");
const components_code = ref("");
const formColumns = ref([]);
const componentsColumns = ref([]);
const showForm = ref(false);
const showComponents = ref(false);
onMounted(async () => {
const form = await queryFormAPI({ form_code: $route.query.code });
formColumns.value = form.data.map((item) => {
return { text: item.name, value: item.code };
});
const components = await getComponentAPI({ form_code: $route.query.code });
componentsColumns.value = components.data.map((item) => {
return { text: item.name, value: item.code };
});
});
const onFormConfirm = ({ selectedOptions }) => {
showForm.value = false;
form_name.value = selectedOptions[0].text;
form_code.value = selectedOptions[0].value;
};
const onComponentsConfirm = ({ selectedOptions }) => {
showComponents.value = false;
components_name.value = selectedOptions[0].text;
components_code.value = selectedOptions[0].value;
};
const onSubmit = async (values) => {
const result = await addFormFieldAPI({
form_code: form_code.value,
component_code: components_code.value,
});
if (result.code) {
showSuccessToast("新增成功");
}
};
</script>
<style lang="less" scoped></style>
<!--
* @Date: 2022-11-17 14:38:04
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-17 15:42:23
* @FilePath: /data-table/src/views/setForm/addForm.vue
* @Description: 添加表单
-->
<template>
<div class="add-form">
<van-nav-bar title="添加表单" />
<van-form @submit="onSubmit" style="margin-top: 1rem">
<van-cell-group inset>
<van-field
v-model="client"
name="client"
is-link
readonly
label="主体客户"
placeholder="主体客户"
@click="showPicker = true"
required
:rules="[{ required: true, message: '请填写主体客户' }]"
/>
<van-field
v-model="name"
name="name"
label="表单名称"
placeholder="表单名称"
required
:rules="[{ required: true, message: '请填写表单名称' }]"
/>
<van-field v-model="note" name="note" label="表单描述" placeholder="表单描述" />
</van-cell-group>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit">确认</van-button>
</div>
</van-form>
</div>
<van-popup v-model:show="showPicker" round position="bottom">
<van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
</van-popup>
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addFormAPI } from "@/api/form.js";
import { showSuccessToast, showFailToast } from "vant";
import {
Cookies,
$,
_,
axios,
storeToRefs,
mainStore,
Toast,
useTitle,
} from "@/utils/generatePackage.js";
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const client = ref("");
const client_id = ref("");
const name = ref("");
const note = ref("");
const columns = [
{ text: "弥陀", value: 120463 },
{ text: "观宗", value: 81661 },
];
const result = ref("");
const showPicker = ref(false);
const onConfirm = ({ selectedOptions }) => {
showPicker.value = false;
client.value = selectedOptions[0].text;
client_id.value = selectedOptions[0].value;
};
const onSubmit = async (values) => {
const result = await addFormAPI({
client_id: client_id.value,
name: values.name,
note: values.note,
});
if (result.code) {
showSuccessToast("新增成功");
}
};
</script>
<style lang="less" scoped></style>
<!--
* @Date: 2022-11-17 15:44:24
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2022-11-17 17:24:07
* @FilePath: /data-table/src/views/setForm/setField.vue
* @Description: 添加或修改表单字段属性设置
-->
<template>
<div class="add-field">
<van-nav-bar title="添加表单字段属性设置" />
<van-form @submit="onSubmit" style="margin-top: 1rem">
<van-cell-group inset>
<van-field
v-model="form_name"
name="form_name"
is-link
readonly
label="表单名称"
placeholder="表单名称"
@click="showForm = true"
required
:rules="[{ required: true, message: '请选择表单名称' }]"
/>
<van-field
v-model="field_name"
name="field_name"
is-link
readonly
label="字段名称"
placeholder="字段名称"
@click="showField = true"
required
:rules="[{ required: true, message: '请选择字段名称' }]"
/>
<van-field
v-model="components_name"
name="components_name"
is-link
readonly
label="组件名称"
placeholder="组件名称"
@click="showComponents = true"
required
:rules="[{ required: true, message: '请选择组件名称' }]"
/>
<van-field readonly label="组件属性" />
<van-row v-for="(item, index) in propertyList" :key="index">
<van-col>
<van-field v-model="item.property_code" />
</van-col>
<van-col>
<van-field v-model="item.setting_value" />
</van-col>
</van-row>
</van-cell-group>
<div style="margin: 16px">
<van-button round block type="primary" native-type="submit">确认</van-button>
</div>
</van-form>
</div>
<van-popup v-model:show="showForm" round position="bottom">
<van-picker
:columns="formColumns"
@cancel="showForm = false"
@confirm="onFormConfirm"
/>
</van-popup>
<van-popup v-model:show="showField" round position="bottom">
<van-picker
:columns="fieldColumns"
@cancel="showField = false"
@confirm="onFieldConfirm"
/>
</van-popup>
<van-popup v-model:show="showComponents" round position="bottom">
<van-picker
:columns="componentsColumns"
@cancel="showComponents = false"
@confirm="onComponentsConfirm"
/>
</van-popup>
</template>
<script setup>
import { ref } from "vue";
import { useRoute, useRouter } from "vue-router";
import { addFormFieldAPI, queryFormAPI } from "@/api/form.js";
import { getComponentAPI } from "@/api/component.js";
import { showSuccessToast, showFailToast } from "vant";
import {
Cookies,
$,
_,
axios,
storeToRefs,
mainStore,
Toast,
useTitle,
} from "@/utils/generatePackage.js";
//import { } from '@/utils/generateModules.js'
//import { } from '@/utils/generateIcons.js'
//import { } from '@/composables'
const $route = useRoute();
const $router = useRouter();
useTitle($route.meta.title);
const form_name = ref("");
const form_code = ref("");
const field_name = ref("");
const components_name = ref("");
const components_code = ref("");
const formColumns = ref([]);
const fieldColumns = ref([]);
const propertyList = ref([]);
const componentsColumns = ref([]);
const showForm = ref(false);
const showField = ref(false);
const showComponents = ref(false);
const formData = ref("");
const componentsData = ref("");
onMounted(async () => {
const form = await queryFormAPI({ form_code: $route.query.code });
formData.value = form.data;
formColumns.value = form.data.map((item) => {
return { text: item.name, value: item.code };
});
const components = await getComponentAPI({ form_code: $route.query.code });
componentsData.value = components.data;
componentsColumns.value = components.data.map((item) => {
return { text: item.name, value: item.code };
});
});
const onFormConfirm = ({ selectedOptions }) => {
showForm.value = false;
form_name.value = selectedOptions[0].text;
form_code.value = selectedOptions[0].value;
// 生成相应下级字段列表
formData.value.forEach((element) => {
if (element.code === form_code.value) {
fieldColumns.value = element.field_list.map((item) => {
return { text: item.field_name, value: item.field_name };
});
}
});
// 重置选择字段名称
field_name.value = "";
};
const onFieldConfirm = ({ selectedOptions }) => {
showField.value = false;
field_name.value = selectedOptions[0].text;
//
formData.value.forEach((element) => {
if (element.code === form_code.value) {
element.field_list.forEach((field) => {
if (field.field_name === field_name.value) {
// 查询组件名称
components_name.value = field.component_name;
propertyList.value = field.property_list;
}
});
}
});
};
const onComponentsConfirm = ({ selectedOptions }) => {
showComponents.value = false;
components_name.value = selectedOptions[0].text;
components_code.value = selectedOptions[0].value;
formData.value.forEach((element) => {
if (element.code === form_code.value) {
element.field_list.forEach((field) => {
if (field.field_name === field_name.value) {
// 查询组件名称
components_name.value = field.component_name;
propertyList.value = field.property_list;
}
});
}
});
};
const onSubmit = async (values) => {
const result = await addFormFieldAPI({
form_code: form_code.value,
component_code: components_code.value,
});
if (result.code) {
showSuccessToast("新增成功");
}
};
</script>
<style lang="less" scoped></style>