This commit is contained in:
吴先生 2023-07-11 12:02:49 +08:00
commit 7abb01ab70
6 changed files with 263 additions and 206 deletions

View File

@ -27,12 +27,13 @@
<!-- date -->
<el-date-picker v-if="item.type == 'date'" :disabled="Boolean(item.disabled)" v-model="form[item.model]"
:type="item.dateType || date" :value-format="item.format || 'YYYY-MM-DD'"
:type="item.dateType || 'date'" :value-format="item.format || 'YYYY-MM-DD'"
:placeholder="item.placeholder" />
<!-- tree-select -->
<el-tree-select v-if="item.type == 'tree-select'" v-model="form[item.model]" :data="item.options"
check-strictly :render-after-expand="false" :disabled="Boolean(item.disabled)" />
<el-tree-select v-if="item.type == 'tree-select'" :placeholder="item.placeholder"
v-model="form[item.model]" :data="item.options" check-strictly :render-after-expand="false"
:disabled="Boolean(item.disabled)" />
</el-form-item>
</el-col>
@ -52,7 +53,7 @@
</template>
<script setup>
import { ref, reactive, toRefs, onMounted, onBeforeMount, watch, watchEffect, computed, getCurrentInstance } from 'vue'
import { ref, reactive, toRefs, onMounted, onBeforeMount, watch, watchEffect, computed, getCurrentInstance, nextTick } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import cloneDeep from "lodash.clonedeep";
@ -91,10 +92,18 @@ const props = defineProps({
type: Array,
default: () => []
},
//
formJosnDisabled: {
type: Boolean,
default: false
},
//
formJsonData: {
type: Object,
default: () => {
return {}
}
},
//
modelValue: {}
})
@ -112,7 +121,7 @@ const handleClose = () => {
//
const handleSubmit = async () => {
if (props.formType == 'json ') {
if (props.formType == 'json') {
await formRef.value.validate((valid, fields) => {
if (valid) {
emit('handleSubmit', form.value)
@ -121,6 +130,7 @@ const handleSubmit = async () => {
}
})
} else {
console.log(12)
emit('handleSubmit', form.value)
}
}
@ -130,10 +140,15 @@ watch(() => props.modelValue, (newValue) => {
dialogVisible.value = props.modelValue
if (props.formType == 'json' && newValue) {
nextTick(() => {
ruleFormRef.value.clearValidate() //
formData.value = cloneDeep(props.formJsonData) //
formRef.value.clearValidate() //
form.value = cloneDeep(props.formJsonData) //
})
}
})
</script>
<style lang='scss' scoped></style>
<style lang='scss' scoped>
:deep(.el-select),
:deep(.el-date-editor).el-input {
width: 100% !important;
}
</style>

View File

@ -45,7 +45,7 @@ const FormDialogData = reactive({
formJosnElement: [
{
type: 'input', //
cloSpan: '24', // 24
cloSpan: 24, // 24
disabled: false, // false
label: '姓名', // label
placeholder: '请填写姓名', // placeholder

View File

@ -17,7 +17,7 @@
</span>
<el-button type="primary" icon="Connection" :disabled="singleDisabledIf" v-if="item === 'detail'"
v-permission="tableHeader[2]?.edit" @click="emit('handle', 'detail ')" :key="index">详情</el-button>
v-permission="tableHeader[2]?.detail" @click="emit('handle', 'detail ')" :key="index">详情</el-button>
<template v-if="Object.prototype.toString.call(item) === '[object Object]'">
<el-button type="primary" :disabled="customDisabled(item)" :icon="item.icon" v-permission="item.permission"

View File

@ -104,6 +104,7 @@ const data = reactive({
{
create: undefined,
edit: false,
detail: false,
delete: false,
search: false,
advanced: false,

View File

@ -1,15 +1,13 @@
<template>
<div class="example">
<TableBody v-bind="data" @handleTableHeader="handleTableHeader" @handleTablePagination="handleTablePagination"
@handleTableSort="handleTableSort" ref="TableBodyRef">
<!-- 左侧顶部插槽 -->
<template #TableHeaderLeft="{ selectData }">
<el-button @click="handleSlot(selectData)">插槽</el-button>
</template>
ref="TableBodyRef">
<!-- 右侧顶部插槽 -->
<template #TableHeaderRight="{ selectData }">
<el-button @click="handleSlot(selectData)">插槽</el-button>
<el-select v-model="reqParams.deptId" placeholder="请选择部门" @change="init" clearable class="status-select">
<el-option v-for="item in bmOptions" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</template>
<!-- 表格插槽使用 -->
@ -19,39 +17,18 @@
</TableBody>
<FormDialog v-model="formDialog" v-bind="FormDialogData" @handleSubmit="handleSubmit">
<template #default>
<el-form :model="form" label-width="120px">
<el-form-item label="Activity name">
<el-input v-model="form.name" />
</el-form-item>
<el-form-item label="Activity zone">
<el-select v-model="form.region" placeholder="please select your zone">
<el-option label="Zone one" value="shanghai" />
<el-option label="Zone two" value="beijing" />
</el-select>
</el-form-item>
<el-form-item label="Activity time">
<el-col :span="11">
<el-date-picker v-model="form.date1" type="date" placeholder="Pick a date" style="width: 100%" />
</el-col>
<el-col :span="2" class="text-center">
<span class="text-gray-500">-</span>
</el-col>
<el-col :span="11">
<el-time-picker v-model="form.date2" placeholder="Pick a time" style="width: 100%" />
</el-col>
</el-form-item>
</el-form>
</template>
</FormDialog>
</div>
</template>
<script setup>
import { ref, reactive } from "vue";
import { ref, reactive, onMounted } from "vue";
import TableBody from "@/components/TableBody/TableBody.vue";
import FormDialog from "@/components/FormDialog/FormDialog.vue";
import http from "@/utils/request.js";
import { ElMessage } from "element-plus";
const bmOptions = ref([])
const TableBodyRef = ref();
const data = reactive({
/**
@ -65,62 +42,11 @@ const data = reactive({
"edit",
"delete",
"detail",
{
type: "custom", // // custom popconfirm ,
name: "customButton", // handleTableHeader
title: "自定义", //
icon: "Message", // element icon
// 1. 'single'2. 'Arbitrary '
// 3. 'custom '4.
isOpen: "custom",
// isOpen custom Boolean | | function
// disabled: false,
disabled: (selectData) => {
console.log(selectData, "selectData121341");
if (selectData[0]?.id === 3) {
return false;
}
return true;
},
permission: undefined, // undefinedfalse
},
],
},
{
buttons: [
"search",
"advanced",
"refresh",
"filter",
"bulkDelete",
{
name: "mixInput", //
options: [
{ label: 1, value: 1 },
{ label: 1, value: 1 },
],
// permission: false, //
},
{
name: "sort", //
options: [
{ label: "按企业名称", value: 1 },
{ label: "按姓名", value: 2 },
],
// permission: false, //
},
{
type: "custom", // custom popconfirm ,
name: "customButton", // handleTableHeader
title: "自定义", //
icon: "Message", // element icon
// 1. 'single'2. 'Arbitrary '
// 3. 'custom '4.
isOpen: "custom",
// isOpen custom Boolean | | function
disabled: false,
// permission: false, //
},
],
},
// permission
@ -141,10 +67,10 @@ const data = reactive({
* @description 表格参数
*/
tableType: {
selection: false, // Boolean
selection: true, // Boolean
tableLoading: false, // Boolean loading
tableIndex: true, // Boolean
tableTree: true, // Boolean id
tableTree: false, // Boolean id
tableTreeName: "children", // String 'children'
isExpand: true, // Boolean false
isHiddenPagination: false, // Boolean false
@ -161,20 +87,12 @@ const data = reactive({
label: "插槽",
show: true, //
sortable: true, // Boolean | 'custom' ( 'custom' handleTableSort )
// 使 sortable true
sortableMethod: (a, b) => {
console.log(a.date);
// a b (a b )
// 0 a b 0 0 a b
return new Date(a.date).getTime() - new Date(b.date).getTime();
},
width: 100,
},
{
name: "date",
label: "时间",
show: true,
sortable: "custom",
},
{
name: "name",
@ -207,86 +125,13 @@ const data = reactive({
* @type {Array}
* @description 表格数据(模拟数据)
*/
tableData: [
{
id: 1,
date: "2016-05-01",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
children: [
{
id: 2,
date: "2016-05-01",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
{
id: 3,
date: "2016-05-01",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
],
},
{
id: 4,
date: "2016-05-02",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
{
id: 5,
date: "2016-05-03",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
{
id: 6,
date: "2016-05-04",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
{
id: 7,
date: "2016-05-05",
name: "Tom",
state: "California",
city: "Los Angeles",
address: "No. 189, Grove St, Los Angeles",
zip: "CA 90036",
slotName: "插槽",
},
],
tableData: [],
/**
* @type {Object}
* @description 分页数据
*/
pagination: {
pageSize: 10,
pageSize: 15,
current: 1,
total: 0,
},
@ -297,10 +142,18 @@ const handleTableHeader = ({ type, data }) => {
switch (type) {
case "create":
handleCreate();
console.log(type, data);
break;
case "edit":
console.log(type, data);
handleEdit();
break;
case "search":
handleSearch(data);
break;
case "delete":
handleDelete(data)
break;
case "detail":
handleDetail(data);
break;
}
};
@ -309,60 +162,247 @@ const handleTablePagination = (current) => {
console.log(current);
};
//
const handleTableSort = (column, prop, order) => {
console.log(column, prop, order);
};
//
const handleSlot = (val) => {
console.log(val);
//
const handleSearch = (val) => {
reqParams.name = val.value;
init();
};
//
const handleCreate = () => {
console.log(12);
formDialogStatus.value = 'create'
FormDialogData.formJsonData = {}
formDialog.value = true
};
//
const handleEdit = (val) => {
formDialogStatus.value = 'edit'
// const id = val[0].id
// FormDialogData.formJsonData = {}
// formDialog.value = true
};
//
const handleDelete = (data) => {
const ids = data.map(item => {
return item.id
})
// http.post(`/api/config/removeBatch`, { ids }).then(res => {
// if (res.code == 200) {
// ElMessage({
// message: '',
// type: 'success',
// })
// init()
// }
// })
}
//
const handleDetail = (val) => {
const id = val[0].id
}
//
// TableBodyRef.value.clearMixInput()
//
// TableBodyRef.value.clearSearch()
//
const validateContactPhone = (rule, value, callback) => {
//
if (!value) {
callback(new Error('手机号不能为空'))
}
//1357899
if (!/^1[35789]\d{9}$/.test(value)) {
callback(new Error('手机号格式不正确'))
}
callback()
}
/* 表单弹框 */
const formDialog = ref(false)
const formDialogStatus = ref('')
const FormDialogData = reactive({
title: '新增', // String | |
width: '30%', // String | 30% |
formType: 'slot', // 'slot' slot | 'json' json
width: '50%', // String | 30% |
formType: 'json', // 'slot' slot | 'json' json
// json
formJosnRules: {}, // {}
formJosnLabelWidth: '120px', // 120px label
formJosnRules: {
deptId: [
{ required: true, message: '请选择所属部门', trigger: 'blur' },
],
code: [
{ required: true, message: '请填写系统编码', trigger: 'blur' },
],
name: [
{ required: true, message: '请填写项目名称', trigger: 'blur' },
],
projectApproval: [
{ required: true, message: '请选择立项时间', trigger: 'blur' },
],
contactName: [
{ required: true, message: '请填写负责人', trigger: 'blur' },
],
contactPhone: [
{ required: true, message: '请填写负责人联系电话', trigger: 'blur' },
{ validator: validateContactPhone, trigger: 'blur' }
],
updateFrequency: [
{ required: true, message: '请填写更新频率', trigger: 'blur' },
],
scenario: [
{ required: true, message: '请填写应用场景', trigger: 'blur' },
],
intro: [
{ required: true, message: '请填写信息摘要', trigger: 'blur' },
],
syncType: [
{ required: true, message: '请填写同步方式', trigger: 'blur' },
],
}, // {}
formJosnLabelWidth: 'auto', // 120px label
// form
formJosnElement: [
{
type: 'input', //
cloSpan: '24', // 24
type: 'tree-select', //
cloSpan: 12, // 24
disabled: false, // false
label: '姓名', // label
placeholder: '请填写姓名', // placeholder
label: '所属部门', // label
placeholder: '请选择所属部门', // placeholder
model: 'deptId', // form key
options: [] // type select []
},
{
type: 'input', //
cloSpan: 12, // 24
disabled: false, // false
label: '系统编码', // label
placeholder: '请填写系统编码', // placeholder
model: 'code', // form key
},
{
type: 'input', //
cloSpan: 12, // 24
disabled: false, // false
label: '项目名称', // label
placeholder: '请填写项目名称', // placeholder
model: 'name', // form key
// options: [] // type select []
// dateType: [] // type date date
// dateValueformat: [] // type date YYYY-MM-DD
},
{
type: 'date', //
cloSpan: 12, // 24
disabled: false, // false
label: '立项时间', // label
placeholder: '请选择立项时间', // placeholder
model: 'projectApproval', // form key
},
{
type: 'input', //
cloSpan: 12, // 24
disabled: false, // false
label: '负责人', // label
placeholder: '请填写负责人', // placeholder
model: 'contactName', // form key
},
{
type: 'input', //
cloSpan: 12, // 24
disabled: false, // false
label: '负责人联系电话', // label
placeholder: '请填写负责人联系电话', // placeholder
model: 'contactPhone', // form key
},
{
type: 'input', //
cloSpan: 12, // 24
disabled: false, // false
label: '更新频率', // label
placeholder: '请填写更新频率', // placeholder
model: 'updateFrequency', // form key
},
{
type: 'input', //
cloSpan: 12, // 24
disabled: false, // false
label: '应用场景', // label
placeholder: '请填写应用场景', // placeholder
model: 'scenario', // form key
},
{
type: 'input', //
cloSpan: 12, // 24
disabled: false, // false
label: '信息摘要', // label
placeholder: '请填写信息摘要', // placeholder
model: 'intro', // form key
},
{
type: 'input', //
cloSpan: 12, // 24
disabled: false, // false
label: '同步方式', // label
placeholder: '请填写同步方式', // placeholder
model: 'syncType', // form key
},
],
formJosnDisabled: false, //
formJsonData: {}, //
formJsonData: {
deptId: '',//
code: '', //
name: '', //
projectApproval: '', //
contactName: '', //
contactPhone: '', //
updateFrequency: '', //
scenario: '', //
intro: '', //
syncType: '',//
}, //
})
const handleSubmit = (formJsonValue) => {
console.log(formJsonValue)
formDialog.value = false
}
const form = ref({})
/* 请求参数 */
const reqParams = reactive({
current: data.pagination.current,
size: data.pagination.pageSize,
deptId: undefined,
name: undefined
})
//
const init = () => {
data.tableType.tableLoading = true
http.get(`/api/system/project`, reqParams).then(res => {
if (res.code == 200) {
console.log(res.data)
data.tableData = res.data.records
data.tableType.tableLoading = false
data.pagination.total = res.data.total
}
}).catch(() => {
data.tableType.tableLoading = false
})
}
onMounted(() => {
// init()
})
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.status-select {
width: 200px;
}
</style>

View File

@ -27,8 +27,9 @@ export default defineConfig({
host: '0.0.0.0', // 解决“vite use `--host` to expose”-- 0.0.0.0 将监听所有地址
proxy: {
'/api': {
target: 'http://10.0.0.29:9999',
// target: 'http://10.0.0.29:9999',
// target: 'https://fywz.btdit.cn/',
target: 'http://10.0.0.74:7777/', // 刘进
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
// ws: true,// 开启webSocket