This commit is contained in:
zmj 2024-07-04 10:11:38 +08:00
parent 3b0be014de
commit db6c8388b3
7 changed files with 619 additions and 1 deletions

98
package-lock.json generated
View File

@ -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",

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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>

View File

@ -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", // (inputradiocheckboxselectslider)
"field": "s705v90rbcg3", // (name),
"title": "请假类型", // ,
"info": "", //
"effect": {
"fetch": ""
},
"props": {
// input <input type="">form-createelement-uityperadio
// 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>