add
This commit is contained in:
parent
3b0be014de
commit
db6c8388b3
|
|
@ -10,6 +10,7 @@
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@element-plus/icons-vue": "^2.0.6",
|
"@element-plus/icons-vue": "^2.0.6",
|
||||||
|
"@form-create/element-ui": "^3.2.0",
|
||||||
"@highlightjs/vue-plugin": "^2.1.0",
|
"@highlightjs/vue-plugin": "^2.1.0",
|
||||||
"@wangeditor/editor": "^5.1.12",
|
"@wangeditor/editor": "^5.1.12",
|
||||||
"@wangeditor/editor-for-vue": "^5.1.12",
|
"@wangeditor/editor-for-vue": "^5.1.12",
|
||||||
|
|
@ -704,6 +705,103 @@
|
||||||
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
|
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.1.tgz",
|
||||||
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
|
"integrity": "sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@form-create/component-elm-checkbox": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/component-elm-checkbox/-/component-elm-checkbox-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-6F6iWzTf0+km4cGKTS8GGe8vXl7Goao2GdmwZWBOG0tsMrx52m/ZGgcWCYHqKx3zkibPpXdqyxuMnLYvb1epfw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/component-elm-frame": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/component-elm-frame/-/component-elm-frame-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-XJnYRwZBaViqSF4oQpPucmQiMctG9mAPeNpggUJG8rYZv/IxPb4qNovWaZsqfiCY8wyKtRTkWqqZFe9r9ubGUg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/component-elm-group": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/component-elm-group/-/component-elm-group-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-3Vjdi/zro0HCOnsb2LgQQy7V+vcJxJNrDMn0npYjqARN/ragovHrdSAUqIZ4Ixelo/q3+6vr488tW/SCQjFUSg==",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/component-elm-radio": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/component-elm-radio/-/component-elm-radio-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-oIdkRxFQmwcN2fZDZul0qgIPHjb/0RvrmnZsDU2PYG7aJjxfGY1ZTdtyW21q3Un1ug7FircwqZK7zlbrVXMOWw==",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/component-elm-select": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/component-elm-select/-/component-elm-select-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-jzrrUyLSVDRZHTap3MYVqNub/A00X+hpLn2DCiFj6hNPZC63fuScHhIKWjkQSF4KBDGPYNfi69kFI7SCYPhhjQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/component-elm-tree": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/component-elm-tree/-/component-elm-tree-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-7Cc6XaRcIc88XuOVs8pVHg9uuoByGqa56f8bQy05GsyQTBESV7tIXY78qWXCuDvc+MzE9BtTD7EEdK1YONqYmQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/component-elm-upload": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/component-elm-upload/-/component-elm-upload-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-gg/195vj5PDi1U+0KBOXArTzYnwW63fxlRHyNpb8uolD+Bf9mGwAyLu9V1IfjFSyR33zw6ftQ7K8Q5W2HvN6CA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/component-subform": {
|
||||||
|
"version": "3.1.34",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/component-subform/-/component-subform-3.1.34.tgz",
|
||||||
|
"integrity": "sha512-OJcFH/7MTHx7JLEjDK/weS27qfuFWAI+OK+gXTJ2jIt9aZkGWF/EWkjetiJLt5a0KMw4Z15wOS2XCY9pVK9vlA=="
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/core": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/core/-/core-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-Mp/rxbbvBN1SXfIgpmJeRAgzhlNebCjUnzOzmUg9BvpZeKoxCiBkqDnqRfohMoBNTjDjUtg37WoiyDuzi4L0DQ==",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/element-ui": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/element-ui/-/element-ui-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-r722YiMbSog6yN9rJxA6BdutExEj4ukHyTMAISnEDuwgCgy90oDXp4fSUHUscA6AqLh1+SKK5Rl3RMbp6jLzaA==",
|
||||||
|
"dependencies": {
|
||||||
|
"@form-create/component-elm-checkbox": "^3.2.0",
|
||||||
|
"@form-create/component-elm-frame": "^3.2.0",
|
||||||
|
"@form-create/component-elm-group": "^3.2.0",
|
||||||
|
"@form-create/component-elm-radio": "^3.2.0",
|
||||||
|
"@form-create/component-elm-select": "^3.2.0",
|
||||||
|
"@form-create/component-elm-tree": "^3.2.0",
|
||||||
|
"@form-create/component-elm-upload": "^3.2.0",
|
||||||
|
"@form-create/component-subform": "^3.1.34",
|
||||||
|
"@form-create/core": "^3.2.0",
|
||||||
|
"@form-create/utils": "^3.2.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"vue": "^3.1.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"node_modules/@form-create/utils": {
|
||||||
|
"version": "3.2.0",
|
||||||
|
"resolved": "https://registry.npmmirror.com/@form-create/utils/-/utils-3.2.0.tgz",
|
||||||
|
"integrity": "sha512-fqc7/l+US76NhloxMF3xE7UafYgxA8jU+t5WrAhmjaIAJ0vUNp6ScL/kdwN4nfOvjByZ/Q8BFQT0wqrp4lcgtw=="
|
||||||
|
},
|
||||||
"node_modules/@highlightjs/vue-plugin": {
|
"node_modules/@highlightjs/vue-plugin": {
|
||||||
"version": "2.1.0",
|
"version": "2.1.0",
|
||||||
"resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@highlightjs/vue-plugin/-/vue-plugin-2.1.0.tgz",
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,39 @@
|
||||||
|
<template>
|
||||||
|
<el-button :type="config.type" :size="config.size" @click="emetClikc(config.click)">
|
||||||
|
<template #icon v-if="config.icon">
|
||||||
|
<icon :name="config.icon" />
|
||||||
|
</template>
|
||||||
|
{{ config.label }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { defineProps, defineEmits } from 'vue'
|
||||||
|
const props = defineProps({
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
default: () => { }
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
const emits = defineEmits(['add', 'edit', 'del'])
|
||||||
|
|
||||||
|
const emetClikc = (event) => {
|
||||||
|
switch (event) {
|
||||||
|
case 'handleCreate':
|
||||||
|
emits("add");
|
||||||
|
break;
|
||||||
|
case 'handleUpdate':
|
||||||
|
emits("edit");
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
emits("del");
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
// emit(props.config.click)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,236 @@
|
||||||
|
|
||||||
|
<!-- <template>
|
||||||
|
<el-card class="!border-none" shadow="never">
|
||||||
|
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
||||||
|
<el-form-item :label="item.label" v-for="(item, index) in config.serchList" :key="index">
|
||||||
|
<el-select v-model="queryParams[item.value]" v-if="item.select" :disabled="isDisabled(item.value)">
|
||||||
|
<el-option :label="i.name" :value="i.value" v-for="i in item.select"
|
||||||
|
v-if="Array.isArray(item.select)"></el-option>
|
||||||
|
<el-option v-for="(i, index) in dictData[item.select]" :key="index" :label="i.name"
|
||||||
|
:value="parseInt(i.value)" v-else />
|
||||||
|
</el-select>
|
||||||
|
<el-input class="w-[280px]" v-model="queryParams[item.value]" clearable :placeholder="`请输入${item.label}`"
|
||||||
|
v-else />
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||||
|
<el-button @click="resetParams">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
|
||||||
|
|
||||||
|
<el-card class="!border-none mt-5" v-loading="pager.loading" shadow="never">
|
||||||
|
<div class="mt-4">
|
||||||
|
<el-table :data="pager.lists" @cell-click="handleCurrentChange" row-key="id"
|
||||||
|
@selection-change="handleSelectionChange">
|
||||||
|
|
||||||
|
<el-table-column type="selection" width="55" v-if="multipleChoice" />
|
||||||
|
<el-table-column :label="item[(Object.keys(item))[0]]" show-overflow-tooltip
|
||||||
|
v-for="item in config.tableList ">
|
||||||
|
<template #default="{ row }">
|
||||||
|
{{ (Object.keys(item))[0].includes('.') ?
|
||||||
|
row[(Object.keys(item))[0].split(".")[0]][(Object.keys(item))[0].split(".")[1]] :
|
||||||
|
row[(Object.keys(item))[0]] }}
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end mt-4">
|
||||||
|
<pagination v-model="pager" @change="getLists" />
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end mt-4" v-if="multipleChoice">
|
||||||
|
<el-button type="primary" @click="confirm">确定</el-button>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import { usePaging } from "@/hooks/usePaging"
|
||||||
|
import { defineEmits } from "vue"
|
||||||
|
import { useDictData } from '@/hooks/useDictOptions'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
query: Object,
|
||||||
|
multipleChoice: Boolean
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
/**根据传入的config生成queryParmas */
|
||||||
|
const getParmasFn = () => {
|
||||||
|
const arr = props.config.serchList.map((item: any) => (item.value))
|
||||||
|
const result = arr.reduce((acc: any, curr: any) => {
|
||||||
|
acc[curr] = '';
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
const mergedObj = Object.assign({}, result, props.query);
|
||||||
|
return mergedObj
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/**判断是否需要disabled的搜索框*/
|
||||||
|
const isDisabled = (key: String) => {
|
||||||
|
if (!props.query) return
|
||||||
|
return Object.keys(props.query).includes(key)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 查询条件
|
||||||
|
const queryParams = reactive({
|
||||||
|
...getParmasFn()
|
||||||
|
});
|
||||||
|
|
||||||
|
// const { dictData } = useDictData(props.config.dictData)
|
||||||
|
|
||||||
|
// 选中数据
|
||||||
|
const emits = defineEmits(["customEvent"]);
|
||||||
|
|
||||||
|
// 选中数据子父传递
|
||||||
|
const handleCurrentChange = (value: any) => {
|
||||||
|
if (props.multipleChoice) return
|
||||||
|
emits("customEvent", value);
|
||||||
|
};
|
||||||
|
|
||||||
|
// 多选
|
||||||
|
const multipleSelection = ref([])
|
||||||
|
|
||||||
|
const handleSelectionChange = (val: any) => {
|
||||||
|
multipleSelection.value = val
|
||||||
|
}
|
||||||
|
|
||||||
|
const confirm = () => {
|
||||||
|
emits("customEvent", multipleSelection.value);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// 分页相关
|
||||||
|
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||||
|
fetchFun: props.config.fetchFn,
|
||||||
|
params: queryParams,
|
||||||
|
});
|
||||||
|
|
||||||
|
getLists();
|
||||||
|
</script> -->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
{{ queryParams }}
|
||||||
|
<el-card class="!border-none" shadow="never">
|
||||||
|
<el-form class="mb-[-16px]" :model="queryParams" inline>
|
||||||
|
<el-form-item :label="item.title" v-for="(item, index) in config.search" :key="index">
|
||||||
|
<el-input class="w-[280px]" v-model="queryParams[item.field]" clearable
|
||||||
|
:placeholder="item.props.placeholder" v-if="item.type == 'input'" />
|
||||||
|
<el-select v-if="item.type == 'select'" v-model="queryParams[item.field]">
|
||||||
|
<el-option :label="i.label" :value="i.value" v-for="i in item.options"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-button type="primary" @click="resetPage">查询</el-button>
|
||||||
|
<el-button @click="resetParams">重置</el-button>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</el-card>
|
||||||
|
<el-card class="!border-none mt-5" shadow="never">
|
||||||
|
<genBtn :config="btn" v-for="btn in config.actions" @add="handAdd" />
|
||||||
|
<div class="mt-4">
|
||||||
|
<el-table :data="pager.lists">
|
||||||
|
<el-table-column :label="item.label" :prop="item.prop" v-show="item.show" show-overflow-tooltip
|
||||||
|
v-for="item in config.headers" :width="item.width && item.width" :fixed="item.fixed && item.fixed">
|
||||||
|
<!-- 图片 -->
|
||||||
|
<template #default="{ row }" v-if="item.component">
|
||||||
|
<el-image
|
||||||
|
:style="{ width: item.component[0].options.width, height: item.component[0].options.height }"
|
||||||
|
:src="row[item.prop]" />
|
||||||
|
</template>
|
||||||
|
<!-- 图片结束 -->
|
||||||
|
|
||||||
|
<!-- 操作按钮 -->
|
||||||
|
<template #default="{ row }" v-if="item.action">
|
||||||
|
<genBtn :config="btn" v-for="btn in item.action" @edit="handEdit(row)" @del="handDel(row)" />
|
||||||
|
</template>
|
||||||
|
<!-- 操作按钮结束 -->
|
||||||
|
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
<div class="flex justify-end mt-4">
|
||||||
|
<pagination v-model="pager" @change="getLists" />
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup name="asd">
|
||||||
|
import { defineEmits, defineProps, ref, reactive } from "vue"
|
||||||
|
import genBtn from "./genBtn.vue"
|
||||||
|
import { usePaging } from "@/hooks/usePaging"
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
config: {
|
||||||
|
type: Object,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
tabFetchFn: {
|
||||||
|
type: Function,
|
||||||
|
required: true
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
/**根据传入的config.serch生成queryParmas,主要用于重置按钮 */
|
||||||
|
const getParmasFn = () => {
|
||||||
|
const arr = props.config.search.map((item) => (item.field))
|
||||||
|
const result = arr.reduce((acc, curr) => {
|
||||||
|
acc[curr] = '';
|
||||||
|
return acc;
|
||||||
|
}, {});
|
||||||
|
const mergedObj = Object.assign({}, result, props.query);
|
||||||
|
|
||||||
|
return mergedObj
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
const queryParams = reactive(
|
||||||
|
{
|
||||||
|
...getParmasFn()
|
||||||
|
}
|
||||||
|
)
|
||||||
|
|
||||||
|
// 分页相关
|
||||||
|
const { pager, getLists, resetParams, resetPage } = usePaging({
|
||||||
|
fetchFun: props.tabFetchFn,
|
||||||
|
params: queryParams,
|
||||||
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
//add
|
||||||
|
const handAdd = () => {
|
||||||
|
// console.log9
|
||||||
|
alert("add")
|
||||||
|
}
|
||||||
|
|
||||||
|
// edit
|
||||||
|
const handEdit = (row) => {
|
||||||
|
console.log(row)
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
// del
|
||||||
|
const handdEL = (row) => {
|
||||||
|
console.log('DEL')
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
getLists();
|
||||||
|
</script>
|
||||||
|
|
@ -2,7 +2,7 @@
|
||||||
<el-dropdown class="px-2" @command="handleCommand">
|
<el-dropdown class="px-2" @command="handleCommand">
|
||||||
<div class="flex items-center">
|
<div class="flex items-center">
|
||||||
<el-avatar :size="34" :src="userInfo.avatar" />
|
<el-avatar :size="34" :src="userInfo.avatar" />
|
||||||
<div class="ml-3 mr-1">{{ userInfo.name }}</div>
|
<div class="ml-3 mr-1">{{ userInfo.staff_name }}</div>
|
||||||
<icon name="el-icon-ArrowDown" />
|
<icon name="el-icon-ArrowDown" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,25 @@
|
||||||
|
<template>
|
||||||
|
<generateTable v-if="config.ref" :config="config" :tabFetchFn="apiGoodsListLists"></generateTable>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { apiDeliveryLists } from "@/api/delivery";
|
||||||
|
import { ref, reactive } from "vue"
|
||||||
|
import axios from "axios"
|
||||||
|
import { apiGoodsListLists } from '@/api/goodsList'
|
||||||
|
|
||||||
|
const config = ref({})
|
||||||
|
axios.get('http://192.168.1.22:8544/index/view ')
|
||||||
|
.then(function (response) {
|
||||||
|
config.value = response.data
|
||||||
|
// 处理成功情况
|
||||||
|
console.log(response.data);
|
||||||
|
})
|
||||||
|
.catch(function (error) {
|
||||||
|
// 处理错误情况
|
||||||
|
console.log(error);
|
||||||
|
})
|
||||||
|
.finally(function () {
|
||||||
|
// 总是会执行
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
@ -0,0 +1,220 @@
|
||||||
|
<!--
|
||||||
|
* @Author: oneMiu
|
||||||
|
* @Date: 2022-05-17 14:33:56
|
||||||
|
* @LastEditors: oneMiu
|
||||||
|
* @LastEditTime: 2022-05-18 11:30:03
|
||||||
|
* @Desc:
|
||||||
|
-->
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<section>
|
||||||
|
<FormCreate v-model="fApi" :rule="rule" :option="option" />
|
||||||
|
</section>
|
||||||
|
</template>
|
||||||
|
<script lang="ts">
|
||||||
|
import {
|
||||||
|
defineComponent,
|
||||||
|
ref,
|
||||||
|
onMounted
|
||||||
|
} from "vue";
|
||||||
|
export default defineComponent({
|
||||||
|
name: "FormCreateFoarmat",
|
||||||
|
peops: ["formJson"],
|
||||||
|
setup(props, { emit }) {
|
||||||
|
let fApi = ref({})
|
||||||
|
console.log(props.formJson)
|
||||||
|
let rule = ref([{
|
||||||
|
"type": "select", // 生成组件的名称(就是表单的名称：如input，radio，checkbox，select，slider等)
|
||||||
|
"field": "s705v90rbcg3", // 表单组件的字段名称(就是表单的name属性，注：该必须唯一),自定义组件可以不配置
|
||||||
|
"title": "请假类型", // 组件的名称, 选填
|
||||||
|
"info": "", //提示信息
|
||||||
|
"effect": {
|
||||||
|
"fetch": ""
|
||||||
|
},
|
||||||
|
"props": {
|
||||||
|
// input的表单类型 <input type="">：注：有些表单类型form-create和element-ui专门做成了组件，可以在上面的type中直接用，所以下面有些类型如（radio）在这里会无效哦！！
|
||||||
|
|
||||||
|
// text 默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。
|
||||||
|
// button 定义可点击的按钮（大多与 JavaScript 使用来启动脚本）
|
||||||
|
// checkbox 定义复选框。
|
||||||
|
// color 定义拾色器。
|
||||||
|
// date 定义日期字段（带有 calendar 控件）
|
||||||
|
// datetime 定义日期字段（带有 calendar 和 time 控件）
|
||||||
|
// datetime-local 定义日期字段（带有 calendar 和 time 控件）
|
||||||
|
// month 定义日期字段的月（带有 calendar 控件）
|
||||||
|
// week 定义日期字段的周（带有 calendar 控件）
|
||||||
|
// time 定义日期字段的时、分、秒（带有 time 控件）
|
||||||
|
// email 定义用于 e-mail 地址的文本字段
|
||||||
|
// file 定义输入字段和 "浏览..." 按钮，供文件上传
|
||||||
|
// hidden 定义隐藏输入字段
|
||||||
|
// image 定义图像作为提交按钮
|
||||||
|
// number 定义带有 spinner 控件的数字字段
|
||||||
|
// password 定义密码字段。字段中的字符会被遮蔽。
|
||||||
|
// radio 定义单选按钮。
|
||||||
|
// range 定义带有 slider 控件的数字字段。
|
||||||
|
// reset 定义重置按钮。重置按钮会将所有表单字段重置为初始值。
|
||||||
|
// search 定义用于搜索的文本字段。
|
||||||
|
// submit 定义提交按钮。提交按钮向服务器发送数据。
|
||||||
|
// tel 定义用于电话号码的文本字段。
|
||||||
|
// url 定义用于 URL 的文本字段。
|
||||||
|
"clearable": true
|
||||||
|
},
|
||||||
|
"options": [{
|
||||||
|
"value": "1",
|
||||||
|
"label": "事假"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"value": "2",
|
||||||
|
"label": "调休"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "病假",
|
||||||
|
"value": "3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "年假",
|
||||||
|
"value": "4"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "产假",
|
||||||
|
"value": "5"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "陪产假",
|
||||||
|
"value": "6"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "婚嫁",
|
||||||
|
"value": "7"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "例假",
|
||||||
|
"value": "8"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "丧假",
|
||||||
|
"value": "9"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"label": "哺乳假",
|
||||||
|
"value": "10"
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"_fc_drag_tag": "select",
|
||||||
|
"hidden": false,
|
||||||
|
"display": true,
|
||||||
|
"$required": ""
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "datePicker",
|
||||||
|
"field": "7su1moi7tfy8o",
|
||||||
|
"title": "开始时间",
|
||||||
|
"info": "",
|
||||||
|
"props": {
|
||||||
|
"type": "datetime",
|
||||||
|
"placeholder": "请选择开始时间"
|
||||||
|
},
|
||||||
|
"_fc_drag_tag": "datePicker",
|
||||||
|
"hidden": false,
|
||||||
|
"display": true,
|
||||||
|
"$required": "请选择开始时间"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "datePicker",
|
||||||
|
"field": "3wm1moi7vuyvt",
|
||||||
|
"title": "结束时间",
|
||||||
|
"info": "",
|
||||||
|
"props": {
|
||||||
|
"type": "datetime",
|
||||||
|
"placeholder": "请选择结束时间"
|
||||||
|
},
|
||||||
|
"_fc_drag_tag": "datePicker",
|
||||||
|
"hidden": false,
|
||||||
|
"display": true,
|
||||||
|
"$required": "请选择结束时间"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "input",
|
||||||
|
"field": "dyg1moi7xxx16",
|
||||||
|
"title": "时长（小时）",
|
||||||
|
"info": "",
|
||||||
|
"props": {
|
||||||
|
"type": "number",
|
||||||
|
"placeholder": "请输入时长",
|
||||||
|
"readonly": true
|
||||||
|
},
|
||||||
|
"_fc_drag_tag": "input",
|
||||||
|
"hidden": false,
|
||||||
|
"display": true,
|
||||||
|
"$required": "请输入时长"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"type": "input",
|
||||||
|
"field": "3qs1moi80lnhh",
|
||||||
|
"title": "请假事由",
|
||||||
|
"info": "",
|
||||||
|
"props": {
|
||||||
|
"type": "textarea",
|
||||||
|
"placeholder": "请输入请假事由",
|
||||||
|
"rows": 3
|
||||||
|
},
|
||||||
|
"_fc_drag_tag": "input",
|
||||||
|
"hidden": false,
|
||||||
|
"display": true,
|
||||||
|
"$required": ""
|
||||||
|
}
|
||||||
|
])
|
||||||
|
let option = ref({
|
||||||
|
// 显示重置表单按扭
|
||||||
|
resetBtn: true,
|
||||||
|
|
||||||
|
// 表单提交按扭事件
|
||||||
|
onSubmit: formData => {
|
||||||
|
// alert(JSON.stringify(formData));
|
||||||
|
|
||||||
|
// console.log("获取表单中的数据：", formData);
|
||||||
|
emit('submitForm', formData)
|
||||||
|
//按钮进入提交状态
|
||||||
|
// this.fApi.btn.loading();
|
||||||
|
|
||||||
|
//重置按钮禁用
|
||||||
|
// this.fApi.resetBtn.disabled();
|
||||||
|
|
||||||
|
//按钮进入可点击状态
|
||||||
|
// this.fApi.btn.finish();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
//获取Form表单 model对象
|
||||||
|
function getFormModelFn() {
|
||||||
|
console.log("Form表单 model对象：", this.fApi.model());
|
||||||
|
}
|
||||||
|
|
||||||
|
function getUserNameChange(e) {
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.rule[2].value = this.rule[0].value;
|
||||||
|
});
|
||||||
|
console.log(this.fApi.getValue("userName"));
|
||||||
|
}
|
||||||
|
onMounted(() => {
|
||||||
|
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
option,
|
||||||
|
getFormModelFn,
|
||||||
|
rule,
|
||||||
|
fApi
|
||||||
|
};
|
||||||
|
},
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.el-form {
|
||||||
|
padding: 20px 30px 20px 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 500px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
height: calc(100vh - 100px);
|
||||||
|
background-color: #fff;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue