Skip to content

T
test_git

uuai / test_git

通知 1
Star 0
Fork 0
T
test_git

体验新版 GitCode，发现更多精彩内容 >>

提交 616bd57c 编写于 作者: W wuyb@phxg.cn
浏览文件
操作

table

上级 bb5d5920
隐藏空白更改
内联 并排
Showing with 408 addition and 210 deletion
vite-demo/mock/table.js
浏览文件 @ 616bd57c
import {mock} from "mockjs"; import {mock} from "mockjs";
let data = { let data = {
'list|1-10': [{ 'rows|1-10': [{
// 属性 id 是一个自增数，起始值为 1，每次增 1 // 属性 id 是一个自增数，起始值为 1，每次增 1
'id|+1': 1 'id|+1': 1,
'name': '@cname()',
"age|1-30": 18,
"address": '@county(true)',
"tags": '@shuffle([\'LOSER\', \'TEACHER\', \'DEVELOPER\', \'NICE\', \'COOL\'], 1, 3)'
}] }]
} }
module.exports = [ module.exports = [
// 登录 // 获取列表
{ {
url: '/api/table/all', url: '/api/table/all',
type: 'post', type: 'get',
response: config => { response: config => {
const {token} = config.body
if (!token) { const {token} = config.headers
if (token) {
return { return {
code: 60204, code: 200,
message: 'token失效' data: data
} }
} }
return { return {
code: 200, code: 60204,
data: { data: token,
count: data.length, message: 'token失效'
rows: data }
}
},
{
url: '/api/table/add',
type: 'get',
response: config => {
const {token} = config.headers
if (token) {
return {
code: 200,
msg: 'ok'
} }
} }
} }
}, },
] ]
vite-demo/mock/user.js
浏览文件 @ 616bd57c
...@@ -54,14 +54,15 @@ module.exports = [ ...@@ -54,14 +54,15 @@ module.exports = [
url: '/api/user/info', url: '/api/user/info',
type: 'get', type: 'get',
response: config => { response: config => {
const {token} = config.query console.log('/api/user/info - config',config);
const {token} = config.headers
const info = users[token] const info = users[token]
// mock error // mock error
if (!info) { if (!info) {
return { return {
code: 50008, code: 50008,
message: 'Login failed, unable to get user details.' message: '获取信息失败'
} }
} }
...@@ -88,7 +89,7 @@ module.exports = [ ...@@ -88,7 +89,7 @@ module.exports = [
url: '/api/menu/getRouter', url: '/api/menu/getRouter',
type: 'get', type: 'get',
response: config => { response: config => {
const {token} = config.query const {token} = config.headers
if (token) { if (token) {
return { return {
code: 200, code: 200,
......
vite-demo/src/api/commonApi/index.js 0 → 100644
浏览文件 @ 616bd57c
/**
* 封装一些公用的接口
*/
import request from '@/utils/request';
// post
export const postAction = (url, data, params, option) => {
return request({
url,
method: 'post',
data,
params,
...option
});
};
// put
export const putAction = (url, data, params, option) => {
return request({
url,
method: 'put',
data,
params,
...option
});
};
// delete
export const deleteAction = (url, data, params, option) => {
return request({
url,
method: 'delete',
data,
params,
...option
});
};
// 所有查询方法 默认get
export const httpAction = (url, params, data, method = 'get', option) => {
console.log('httpAction',url, params, data, method = 'get', option);
return request({
url,
method,
data,
params,
...option
});
};
vite-demo/src/api/list.js 0 → 100644
浏览文件 @ 616bd57c
import request from '@/utils/request'
export function tabelAll(data) {
console.log(data);
return request({
url: '/api/table/all',
method: 'get',
data
})
}
\ No newline at end of file
vite-demo/src/components/configForm/form.vue
浏览文件 @ 616bd57c
...@@ -13,8 +13,8 @@ ...@@ -13,8 +13,8 @@
<a-input-number v-if="item.inputType === 'number'" :disabled="item.disabled || hasDisabled" <a-input-number v-if="item.inputType === 'number'" :disabled="item.disabled || hasDisabled"
v-model:value="formState[`${item.fieldName}`]" v-model:value="formState[`${item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请输入'" :placeholder="item.placeholder?item.placeholder:'请输入'"
:min="item.min?item.min:Infinity" :min="item.min"
:max="item.max?item.max:Infinity"/> :max="item.max"/>
<!--多行文本--> <!--多行文本-->
<a-textarea v-if="item.inputType === 'textarea'" :disabled="item.disabled || hasDisabled" <a-textarea v-if="item.inputType === 'textarea'" :disabled="item.disabled || hasDisabled"
v-model:value="formState[`${item.fieldName}`]" v-model:value="formState[`${item.fieldName}`]"
...@@ -24,7 +24,8 @@ ...@@ -24,7 +24,8 @@
<!--单选--> <!--单选-->
<a-radio-group v-if="item.inputType === 'radio'" :disabled="item.disabled || hasDisabled" <a-radio-group v-if="item.inputType === 'radio'" :disabled="item.disabled || hasDisabled"
v-model:value="formState[`${item.fieldName}`]"> v-model:value="formState[`${item.fieldName}`]">
<a-radio v-for="radio in item.options" :key="radio.value" :value="radio.value">{{radio.name}} <a-radio v-for="radio in item.options" :key="radio.value" :value="radio.value">
{{radio.name}}
</a-radio> </a-radio>
</a-radio-group> </a-radio-group>
<!-- 多选--> <!-- 多选-->
...@@ -39,7 +40,7 @@ ...@@ -39,7 +40,7 @@
<a-select <a-select
v-if="item.inputType == 'select'" v-if="item.inputType == 'select'"
allowClear allowClear
v-model="formState[`${item.fieldName}`]" v-model:value="formState[`${item.fieldName}`]"
:placeholder="item.placeholder?item.placeholder:'请选择'" :placeholder="item.placeholder?item.placeholder:'请选择'"
:show-search="item.showSearch" :show-search="item.showSearch"
:options="item.options" :options="item.options"
...@@ -91,7 +92,7 @@ ...@@ -91,7 +92,7 @@
props: { props: {
config: Object, config: Object,
}, },
setup(props) { setup(props, {emit}) {
// 表单数据 // 表单数据
const formRef = ref(null); const formRef = ref(null);
const dateFormat = 'YYYY-MM-DD'; const dateFormat = 'YYYY-MM-DD';
...@@ -101,7 +102,7 @@ ...@@ -101,7 +102,7 @@
const initForm = () => { const initForm = () => {
props.config.data.forEach(item => { props.config.data.forEach(item => {
if (item.inputType !== "range") { if (item.inputType !== "range") {
let defaultVal = item.defaultVal ? item.defaultVal : '' let defaultVal = item.defaultVal ? item.defaultVal : undefined
formState[`${item.fieldName}`] = defaultVal; formState[`${item.fieldName}`] = defaultVal;
} else { } else {
if (item.fieldName) { if (item.fieldName) {
...@@ -122,25 +123,27 @@ ...@@ -122,25 +123,27 @@
let validator = typeof item.validator === 'function' ? item.validator : null let validator = typeof item.validator === 'function' ? item.validator : null
if (!validator) { if (!validator) {
rulesForm[item.fieldName] = [{ rulesForm[item.fieldName] = [{
whitespace: true, whitespace: item.required ? item.required : false, // 必选时，空格是否会被视为错误
required: item.required, required: item.required,
message: `${item.label}内容不能为空`, message: `${item.label}不能为空`,
trigger: 'blur', // trigger: 'change',
type: item.inputType === 'number' ? 'number' : 'string'
}] }]
} else { } else {
// 自定义效验内容 // 自定义效验内容
rulesForm[item.fieldName] = [{ rulesForm[item.fieldName] = [{
whitespace: true, whitespace: item.required ? item.required : false,
required: item.required, required: item.required,
validator: validator, validator: validator,
trigger: 'blur', // trigger: 'change',
}] }]
} }
} }
} }
}); });
console.log('rules', rulesForm); console.log('form - rules', rulesForm);
console.log('formState', formState); console.log('form - formState', formState);
} }
onMounted(() => { onMounted(() => {
...@@ -149,7 +152,7 @@ ...@@ -149,7 +152,7 @@
// 时间选择 // 时间选择
function onInputChange(fieldName, date, dateStrings, type) { function onInputChange(fieldName, date, dateStrings, type) {
// console.log(fieldName, date, dateStrings, type); console.log(fieldName, date, dateStrings, type);
if (type) { if (type) {
if (fieldName && type === 'range') { if (fieldName && type === 'range') {
let arr = fieldName.split(','); let arr = fieldName.split(',');
...@@ -162,26 +165,34 @@ ...@@ -162,26 +165,34 @@
formState.endTime = dateStrings[1]; formState.endTime = dateStrings[1];
} }
} else { } else {
formState[fieldName] = date ? moment(date, dateFormat) : null // moment(val).format("YYYY-MM-DD HH:mm:ss")
formState[fieldName] = date ? moment(date).format(dateFormat) : null
// console.log('formState - moment', moment(date).format(dateFormat));
console.log('formState - str', moment(date, dateFormat));
// console.log('formState', formState);
} }
} }
// 重置表单 // 重置表单
const resetForm = () => { const resetForm = () => {
formRef.value.resetFields(); formRef.value.resetFields();
console.log('resetForm', formState);
for (let key in formState) { for (let key in formState) {
formState[key] = ''; formState[key] = undefined;
} }
emit('close')
} }
// 数据提交 // 数据提交
const onSubmit = () => { const onSubmit = () => {
console.log('formRef', formRef); console.log('formRef', formRef);
formRef.value.validate() formRef.value.validate()
.then(() => { .then(() => {
console.log('values', toRaw(formState)); console.log('values', toRaw(formState));
let data = getQuery(); let data = getQuery();
console.log(data); console.log(data);
emit('ok', data)
}) })
.catch((error) => { .catch((error) => {
console.log('error', error); console.log('error', error);
......
vite-demo/src/components/popups/drawer.vue
浏览文件 @ 616bd57c
<template> <template>
<a-drawer <a-drawer
:title="drawerTitle" :title="title"
:width="drawerWidth"
:placement="drawerPlacement" :placement="drawerPlacement"
:closable="drawerClosable" :closable="drawerClosable"
v-model:visible="isShow" v-model:visible="isShow"
...@@ -18,8 +19,12 @@ ...@@ -18,8 +19,12 @@
type: Boolean, type: Boolean,
default: false default: false
}, },
drawerWidth:{
type: [Number,String],
default: 700
},
// 标题 // 标题
drawerTitle: { title: {
type: String, type: String,
default: '' default: ''
}, },
......
vite-demo/src/components/popups/modal.vue
浏览文件 @ 616bd57c
...@@ -2,19 +2,20 @@ ...@@ -2,19 +2,20 @@
<a-modal <a-modal
:width="800" :width="800"
:title="title" :title="title"
:visible="isShow" v-model:visible="isShow"
:maskClosable="false" :maskClosable="false"
:confirmLoading="confirmLoading" :confirmLoading="confirmLoading"
@ok="handleOk" @ok="modalOk"
@cancel="handleCancel" @cancel="modalCancel"
> >
<slot></slot> <slot>默认插槽</slot>
</a-modal> </a-modal>
</template> </template>
<script> <script>
import {ref, watch} from 'vue' import {ref, watch} from 'vue'
import {useModal} from "@/hook/useModal";
export default { export default {
name: "modalIndex", name: "modalIndex",
...@@ -28,27 +29,17 @@ ...@@ -28,27 +29,17 @@
default: false default: false
}, },
}, },
setup(props, content) { setup(props, {emit}) {
console.log('props - modal', props); const {
let confirmLoading = ref(false) modalOk,
const handleOk = (e) => { modalCancel,
confirmLoading.value = true } = useModal(emit)
content.emit('modalOk');
handleCancel()
setTimeout(() => {
confirmLoading.value = false
}, 300)
}
const handleCancel = () => {
content.emit('modalCancel');
content.emit('update:isShow', false);
}
return { return {
handleOk, modalOk,
handleCancel, modalCancel,
confirmLoading confirmLoading:false
} }
} }
} }
......
vite-demo/src/components/popups/popups.js
浏览文件 @ 616bd57c
...@@ -3,7 +3,9 @@ import modal from './modal.vue' ...@@ -3,7 +3,9 @@ import modal from './modal.vue'
import {h} from 'vue' import {h} from 'vue'
export const renderPopups = function (props, {slots}) { export const renderPopups = function (props, {slots}) {
console.log('renderPopups',props); const paramsProps = {
return props.type === 'modal' ? h(modal, slots.default()) : h(drawer, slots.default()) isShow: props.isShow,
} title: props.title,
}
return props.type === 'modal' ? h(modal, paramsProps, slots.default()) : h(drawer, paramsProps, slots.default())
}
\ No newline at end of file
vite-demo/src/hook/useModal.js
浏览文件 @ 616bd57c
import {ref, reactive, computed} from 'vue' import {ref, reactive, toRefs, computed} from 'vue'
import {postAction, putAction, deleteAction, httpAction} from '@/api/commonApi/index';
// 设置模态框 // 设置模态框
export function useModal() { export function useModal(emit) {
const isShow = ref(false)
const isModalLoading = ref(false) const useModalData = reactive({
isShow: false,
confirmLoading: false
})
const onModalShow = () => { const onModalShow = () => {
isShow.value = true console.log('打开弹框')
useModalData.isShow = true
console.log('modal - use', useModalData.isShow);
} }
const modalOk = () => { const modalOk = () => {
console.log('确认') console.log('确认')
useModalData.isShow = false
} }
const modalCancel = () => { const modalCancel = () => {
console.log('取消') console.log('modal - use - 取消')
useModalData.isShow = false
console.log(useModalData.isShow);
emit('update:isShow', false)
} }
const handleOk = ({url,formItem, otherValues = {}, type = 'add', path}) => {
useModalData.confirmLoading = true;
let axios;
let formData = Object.assign(formItem, otherValues);
if (type === 'edit') { // 修改
if (!this.url.edit) {
message.error('请设置url.edit属性!');
console.error('请设置url.edit属性!');
return;
}
axios = putAction(`${url.edit}/${path}`, formData);
} else { // 新增
if (!url.add) {
message.error('请设置url.add属性!');
console.error('请设置url.add属性!');
return;
}
axios = postAction(url.add, formData);
}
axios.then((res) => {
if (res.code === 201 || res.code === 202) {
this.$emit('ok');
this.close();
}
}).catch(err => {
console.error(err);
}).finally(() => {
useModalData.confirmLoading = false;
});
}
// 根据屏幕变化,设置抽屉尺寸
// const resetScreenSize = () => {
// const screenWidth = document.body.clientWidth;
// if (screenWidth < 500) {
// this.drawerWidth = screenWidth;
// } else {
// this.drawerWidth = 700;
// }
// }
return { return {
modalOk, modalOk,
modalCancel, modalCancel,
onModalShow, onModalShow,
isShow ...toRefs(useModalData),
handleOk
} }
} }
......
vite-demo/src/hook/useTableMdal.js
浏览文件 @ 616bd57c
...@@ -3,10 +3,10 @@ ...@@ -3,10 +3,10 @@
* useTable 表格查询，分页， 删除 * useTable 表格查询，分页， 删除
* @modalMixin 弹窗新增，修改，详情 * @modalMixin 弹窗新增，修改，详情
*/ */
import {ref, reactive, computed} from 'vue' import {ref, reactive, toRefs, computed, onMounted} from 'vue'
import {message, confirm} from 'ant-design-vue' import {message, Modal} from 'ant-design-vue'
// import { postAction, putAction, deleteAction, httpAction } from 'api/commonApi/index'; import {postAction, putAction, deleteAction, httpAction} from '@/api/commonApi/index';
let postAction, putAction, deleteAction, httpAction; // let postAction, putAction, deleteAction, httpAction;
let filterObjByKey, parseDate, getMoment, formatObjDate, getTreeKeys; let filterObjByKey, parseDate, getMoment, formatObjDate, getTreeKeys;
// import { filterObjByKey, parseDate, getMoment, formatObjDate, getTreeKeys } from 'utils/util'; // import { filterObjByKey, parseDate, getMoment, formatObjDate, getTreeKeys } from 'utils/util';
...@@ -61,15 +61,19 @@ export function usePaging() { ...@@ -61,15 +61,19 @@ export function usePaging() {
} }
} }
// 表格
export function useTable(url) { export function useTable(url) {
const {ipagination} = usePaging() const {ipagination} = usePaging()
let tableData = reactive({
// 数据源
dataSource: [],
})
let isInitTable = true, // 是否初始化表格 let isInitTable = true, // 是否初始化表格
// 查询条件 // 查询条件
queryParam = {}, queryParam = {},
// 折叠区域查询条件 // 折叠区域查询条件
subQueryParam = {}, subQueryParam = {},
// 数据源
dataSource = [],
// 表格加载状态 // 表格加载状态
tableLoading = ref(false), tableLoading = ref(false),
...@@ -114,9 +118,9 @@ export function useTable(url) { ...@@ -114,9 +118,9 @@ export function useTable(url) {
if (url.dataAll) { // 数据和表格总数一起请求 if (url.dataAll) { // 数据和表格总数一起请求
httpAction(url.dataAll, data).then((res) => { // 列表数据 httpAction(url.dataAll, data).then((res) => { // 列表数据
if (res.code === 200) { if (res.code === 200) {
dataSource = res.data.rows; tableData.dataSource = res.data.rows;
ipagination.total = Number(res.data.count); ipagination.total = Number(res.data.count);
console.log(dataSource) console.log('tableData.', tableData.dataSource)
} }
tableLoading.value = false; tableLoading.value = false;
}).catch(error => { }).catch(error => {
...@@ -126,7 +130,7 @@ export function useTable(url) { ...@@ -126,7 +130,7 @@ export function useTable(url) {
} else { // 数据和表格总数分开请求请求 } else { // 数据和表格总数分开请求请求
httpAction(url.list, data).then((res) => { // 列表数据 httpAction(url.list, data).then((res) => { // 列表数据
if (res.code === 200) { if (res.code === 200) {
dataSource = res.data; tableData.dataSource = res.data;
console.log(dataSource) console.log(dataSource)
} }
tableLoading.value = false; tableLoading.value = false;
...@@ -157,7 +161,6 @@ export function useTable(url) { ...@@ -157,7 +161,6 @@ export function useTable(url) {
return params; return params;
} }
// 表格行选择 // 表格行选择
const onSelectChange = (selectedRowKeys, selectionRows) => { const onSelectChange = (selectedRowKeys, selectionRows) => {
console.log(selectedRowKeys, selectionRows) console.log(selectedRowKeys, selectionRows)
...@@ -214,7 +217,7 @@ export function useTable(url) { ...@@ -214,7 +217,7 @@ export function useTable(url) {
// } // }
const openModal = () => { const openModal = () => {
this.showModal = true; showModal.value = true;
} }
// 批量删除 // 批量删除
...@@ -268,7 +271,7 @@ export function useTable(url) { ...@@ -268,7 +271,7 @@ export function useTable(url) {
console.error('请设置url.delete属性!'); console.error('请设置url.delete属性!');
return; return;
} }
confirm({ Modal.confirm({
title: '确认删除', title: '确认删除',
content: tip, content: tip,
centered: true, centered: true,
...@@ -295,16 +298,19 @@ export function useTable(url) { ...@@ -295,16 +298,19 @@ export function useTable(url) {
// 排序 分页 // 排序 分页
const handleTableChange = (pagination, filters, sorter) => { const handleTableChange = (pagination, filters, sorter) => {
ipagination = pagination; // ipagination = pagination;
loadData(); loadData();
} }
if (isInitTable) {
onMounted(() => {
loadData(); loadData();
} })
return { return {
ipagination, loadData,
...toRefs(tableData),
// ipagination,
onSelectChange onSelectChange
}; };
}; };
...@@ -331,7 +337,7 @@ const props = { ...@@ -331,7 +337,7 @@ const props = {
} }
export function useModal() { export function useModal() {
return { const useModalData = reactive({
// 弹窗设置 // 弹窗设置
drawerWidth: 700, drawerWidth: 700,
// 布局 // 布局
...@@ -344,8 +350,7 @@ export function useModal() { ...@@ -344,8 +350,7 @@ export function useModal() {
sm: {span: 16} sm: {span: 16}
}, },
confirmLoading: false, confirmLoading: false,
form: this.$form.createForm(this) })
}
const disableSubmit = computed({ const disableSubmit = computed({
get: () => { get: () => {
if (type === 'detail') { if (type === 'detail') {
...@@ -353,95 +358,56 @@ export function useModal() { ...@@ -353,95 +358,56 @@ export function useModal() {
} }
return false; return false;
}, },
set: () => { set: () => {
}// 查看详情，禁用所有表单 }// 查看详情，禁用所有表单
})
const close = () => {
this.confirmLoading = false;
this.disableSubmit = false;
this.$emit('close');
this.$emit('update:show', false);
} }
methods: { const handleOk = (otherValues = {}, path, dateFormat = 'YYYY-MM-DD') => {
// 回填数据 useModalData.confirmLoading = true;
backfillData() let axios;
{ if (this.type === 'edit') { // 修改
this.resetScreenSize(); if (!this.url.edit) {
// 回填数据 this.$message.error('请设置url.edit属性!');
this.$nextTick().finally(() => { console.error('请设置url.edit属性!');
this.form.resetFields(); return;
// 日期处理
if (this.type !== 'add') {
this.data = parseDate(this.data);
setTimeout(() => {
this.form.setFieldsValue(this.data);
}
)
}
})
;
}
,
handleOk(otherValues = {}, path, dateFormat = 'YYYY-MM-DD')
{
this.confirmLoading = true;
// 触发表单验证
this.form.validateFields((err, values) => {
if (!err) {
let formData = Object.assign(values, otherValues);
formData = formatObjDate(formData, dateFormat);
Object.keys(formData).forEach(item => { // 清空字符串前后空格
if (typeof formData[item] === 'string') {
formData[item] = formData[item].trim();
}
})
let axios;
if (this.type === 'edit') { // 修改
if (!this.url.edit) {
this.$message.error('请设置url.edit属性!');
console.error('请设置url.edit属性!');
return;
}
axios = putAction(`${this.url.edit}/${path}`, formData);
} else { // 新增
if (!this.url.add) {
this.$message.error('请设置url.add属性!');
console.error('请设置url.add属性!');
return;
}
axios = postAction(this.url.add, formData);
}
axios.then((res) => {
if (res.code === 201 || res.code === 202) {
this.$emit('ok');
this.close();
}
}).catch(err => {
console.error(err);
}).finally(() => {
this.confirmLoading = false;
});
} else {
this.confirmLoading = false;
}
})
}
,
close()
{
this.confirmLoading = false;
this.disableSubmit = false;
this.$emit('close');
this.$emit('update:show', false);
}
,
// 根据屏幕变化,设置抽屉尺寸
resetScreenSize()
{
const screenWidth = document.body.clientWidth;
if (screenWidth < 500) {
this.drawerWidth = screenWidth;
} else {
this.drawerWidth = 700;
} }
axios = putAction(`${this.url.edit}/${path}`, formData);
} else { // 新增
if (!this.url.add) {
this.$message.error('请设置url.add属性!');
console.error('请设置url.add属性!');
return;
}
axios = postAction(this.url.add, formData);
} }
, axios.then((res) => {
if (res.code === 201 || res.code === 202) {
this.$emit('ok');
this.close();
}
}).catch(err => {
console.error(err);
}).finally(() => {
this.confirmLoading = false;
});
}
// 根据屏幕变化,设置抽屉尺寸
const resetScreenSize = () => {
const screenWidth = document.body.clientWidth;
if (screenWidth < 500) {
this.drawerWidth = screenWidth;
} else {
this.drawerWidth = 700;
}
} }
}; };
vite-demo/src/store/getters.js
浏览文件 @ 616bd57c
const getters = { const getters = {
roles: state => state.user.roles, // 用户权限 roles: state => state.user.roles, // 用户权限
router: state => state.permission.router // 用户路由 router: state => state.permission.router, // 用户路由
token: state => state.user.token // 用户路由
} }
export default getters export default getters
\ No newline at end of file
vite-demo/src/store/modules/user.js
浏览文件 @ 616bd57c
...@@ -34,7 +34,7 @@ const user = { ...@@ -34,7 +34,7 @@ const user = {
// 获取用户信息 // 获取用户信息
getUserInfo({commit}, token) { getUserInfo({commit}, token) {
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
getInfo(token).then(res => { getInfo().then(res => {
const {data} = res; const {data} = res;
console.log('res', data.roles) console.log('res', data.roles)
commit('SER_USER_ROLES',data.roles) commit('SER_USER_ROLES',data.roles)
......
vite-demo/src/utils/request.js
浏览文件 @ 616bd57c
import axios from 'axios' import axios from 'axios'
import {Modal, message} from 'ant-design-vue' import {Modal, message} from 'ant-design-vue'
import store from '@/store' import store from '@/store/index'
import {getToken} from '@/utils/auth' import {getToken} from '@/utils/auth'
// create an axios instance // create an axios instance
const service = axios.create({ const service = axios.create({
baseURL: import.meta.env.BASE_API, // url = base url + request url baseURL: import.meta.env.BASE_API, // url = base url + request url
...@@ -14,13 +15,15 @@ const service = axios.create({ ...@@ -14,13 +15,15 @@ const service = axios.create({
service.interceptors.request.use( service.interceptors.request.use(
config => { config => {
// do something before request is sent // do something before request is sent
console.log('store',store);
console.log('store.getters.token',store.getters.token);
if (store.getters.token) { if (store.getters.token) {
// let each request carry token // let each request carry token
// ['X-Token'] is a custom headers key // ['X-Token'] is a custom headers key
// please modify it according to the actual situation // please modify it according to the actual situation
config.headers['X-Token'] = getToken() config.headers['token'] = getToken()
} }
console.log('config',config);
return config return config
}, },
error => { error => {
...@@ -34,6 +37,8 @@ service.interceptors.request.use( ...@@ -34,6 +37,8 @@ service.interceptors.request.use(
service.interceptors.response.use( service.interceptors.response.use(
response => { response => {
const res = response.data const res = response.data
console.log('response',response);
if (res.code !== 200) { if (res.code !== 200) {
message.error({ message.error({
content: res.message || 'Error', content: res.message || 'Error',
...@@ -57,6 +62,7 @@ service.interceptors.response.use( ...@@ -57,6 +62,7 @@ service.interceptors.response.use(
} }
return Promise.reject(new Error(res.message || 'Error')) return Promise.reject(new Error(res.message || 'Error'))
} else { } else {
console.log('response',res);
return res return res
} }
}, },
......
vite-demo/src/views/antd/table/components/fromModal.vue
浏览文件 @ 616bd57c
<template> <template>
<!-- <modal >-->
<!-- <div>1232</div>--> <renderPopups v-model:isShow="isShow" :title="title" type="drawer">
<!-- </modal>-->
<renderPopups :isShow="isShow" :type="2"> <a-spin :spinning="confirmLoading">
<template> <configForm :config="configListForm" ref="getQueryRef" @ok="query" @close="modalCancel"></configForm>
drawer </a-spin>
</template>
</renderPopups> </renderPopups>
</template> </template>
<script> <script>
import {ref, reactive} from 'vue'
import modal from '@c/modal/index.vue' import modal from '@c/modal/index.vue'
import {renderPopups} from '@c/popups/popups' import {renderPopups} from '@c/popups/popups'
import {useModal} from "@/hook/useModal";
import configForm from '@c/configForm/form.vue'
export default { export default {
name: "fromModal", name: "fromModal",
props: { props: {
isShow: Boolean title: String
}, },
components: { components: {
modal, modal,
renderPopups renderPopups,
configForm
}, },
setup() { setup(props, {emit}) {
const {onModalShow, isShow, modalCancel, handleOk, confirmLoading} = useModal(emit)
let spinning = ref(false)
let getQueryRef = ref(null)
const query = (data) => {
console.log('spinning', data);
handleOk({
url: {
add: '/api/table/add'
},
formItem: data
})
}
let configListForm = reactive({
data: [
{
inputType: "text",
fieldName: "name",
required: true,
label: "姓名",
placeholder: "请输入姓名"
},
{
inputType: "number",
fieldName: "age",
label: "年龄",
required: true,
placeholder: "请输入年龄"
},
{
inputType: "text",
fieldName: "address",
label: "地址",
required: true,
placeholder: "请输入地址"
},
{
inputType: "date",
fieldName: "time",
label: "时间",
required: true,
placeholder: "请选择时间"
},
{
inputType: "select",
fieldName: "tags",
label: "标签",
required: true,
placeholder: "请选择",
options: [
{value: "0", label: "LOSER"},
{value: "1", label: "TEACHER"},
{value: "2", label: "DEVELOPER"},
{value: "3", label: "NICE"},
{value: "4", label: "COOL"},
]
}
],
})
return {
onModalShow,
isShow,
modalCancel,
//
confirmLoading,
configListForm,
getQueryRef,
query
}
} }
} }
</script> </script>
......
vite-demo/src/views/antd/table/index.vue
浏览文件 @ 616bd57c
<template> <template>
<a-space direction="vertical" style="width: 100%"> <a-space direction="vertical" style="width: 100%">
<a-button @click="onModalShow">新增</a-button> <a-button @click="bindModalShow">新增</a-button>
<a-table :columns="columns" :data-source="data"> <a-table :columns="columns" :data-source="dataSource"
:rowKey="(row,index) => index">
<template #name="{ text }">{{ text }}</template> <template #name="{ text }">{{ text }}</template>
<!--设置表头信息--> <!--设置表头信息-->
<template #customTitle> <template #customTitle>
...@@ -32,7 +33,8 @@ ...@@ -32,7 +33,8 @@
</template> </template>
</a-table> </a-table>
</a-space> </a-space>
<fromModal v-model:isShow="isShow" :title="13"></fromModal>
<fromModal ref="fromModalRef" title="jsx组价"></fromModal>
</template> </template>
<script> <script>
...@@ -91,26 +93,34 @@ ...@@ -91,26 +93,34 @@
}, },
]; ];
import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue'; import {SmileOutlined, DownOutlined} from '@ant-design/icons-vue';
import {useModal} from "@/hook/useModal";
import fromModal from './components/fromModal.vue' import fromModal from './components/fromModal.vue'
import {ref} from 'vue'
// import {tabelAll} from '@/api/list'
import {useTable} from '@/hook/useTableMdal'
export default { export default {
name: "tableIndex", name: "tableIndex",
setup() { setup(props, {emit}) {
const {
modalOk, const fromModalRef = ref()
modalCancel, const bindModalShow = () => {
onModalShow, console.log(fromModalRef.value);
isShow fromModalRef.value.onModalShow()
} = useModal() }
const {dataSource} = useTable({
dataAll: '/api/table/all'
})
console.log('dataSource', dataSource);
return { return {
data, data,
columns, columns,
modalOk, dataSource,
modalCancel,
onModalShow, fromModalRef,
isShow bindModalShow,
}; };
}, },
components: { components: {
......
vite-demo/src/views/skills/components/jsx/btn1.vue
浏览文件 @ 616bd57c
...@@ -10,7 +10,7 @@ ...@@ -10,7 +10,7 @@
</div> </div>
</template> </template>
<script> <script>
import {ref, defineComponent} from 'vue' import {ref, defineComponent, watch} from 'vue'
export default defineComponent({ export default defineComponent({
name: 'btn1', name: 'btn1',
...@@ -22,9 +22,9 @@ ...@@ -22,9 +22,9 @@
setup(props, {emit}) { setup(props, {emit}) {
console.log('props - btn', props); console.log('props - btn', props);
const num = ref(1) const num = ref(1)
const close = () => { const close = () => {
console.log('close') console.log('props - close', 'close')
emit('close');
emit('update:show', false) emit('update:show', false)
} }
return {num, close} return {num, close}
......
vite-demo/src/views/skills/components/jsx/index.vue
浏览文件 @ 616bd57c
<template> <template>
<button @click="componentsToggle">切换</button> <button @click="componentsToggle">切换</button>
<button @click="onShow">显示</button> <button @click="onShow">显示</button>
<renderFn :type="componentsType" title="自定义title" :show.sync="isShow"> <renderFn :type="componentsType" title="自定义title" v-model:show="isShow">
<div default="{text}"> <div default="{text}">
<p> 默认插槽： 111111</p> <p> 默认插槽： 111111</p>
</div> </div>
...@@ -11,18 +11,21 @@ ...@@ -11,18 +11,21 @@
<!-- </template>--> <!-- </template>-->
</renderFn> </renderFn>
<!-- <btn1 title="自定义title" v-model:show="isShow"></btn1>-->
</template> </template>
<script> <script>
import renderFn from './renderFn.js' import renderFn from './renderFn.js'
import vnode from "./vnode" import vnode from "./vnode"
import {ref} from 'vue' import {ref} from 'vue'
import btn1 from './btn1.vue'
export default { export default {
name: "index", name: "index",
components: { components: {
renderFn, renderFn,
vnode vnode,
btn1
}, },
setup() { setup() {
let isShow = ref(false) let isShow = ref(false)
......
vite-demo/src/views/skills/components/jsx/renderFn.js
浏览文件 @ 616bd57c
import btn1 from './btn1.vue' import btn1 from './btn1.vue'
import btn2 from './btn2.vue' import btn2 from './btn2.vue'
import {h, watch} from 'vue' import {h} from 'vue'
// export const renderFn = function (props, {slots}) { // export const renderFn = function (props, {slots}) {
// //
...@@ -14,13 +14,14 @@ import {h, watch} from 'vue' ...@@ -14,13 +14,14 @@ import {h, watch} from 'vue'
export default { export default {
props: ['type', 'show', 'title'], props: ['type', 'show', 'title'],
setup(props, {slots}) { setup(props, {slots,emit}) {
console.log('props - renderFn', props); console.log('props - renderFn', props);
return () => [ return () => [
props.type === 1 ? h(btn1, { props.type === 1 ? h(btn1, {
title: props.title, title: props.title,
type: props.type, type: props.type,
show: props.show show: props.show,
'onUpdate:show': (value) => emit('update:show', false)
}, slots.default) : h(btn2) }, slots.default) : h(btn2)
] ]
} }
......
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或