@xuekl/cli-components 1.0.0

package/XklDict.vue

@@ -0,0 +1,15 @@
+<template>
+    <el-select style="width: 100%;">
+        <el-option v-for="item in list" :key="item.id" :label="item.dicValue" :value="item.dicKey"></el-option>
+    </el-select>
+</template>
+<script setup lang="ts">
+import storeController from '@/controller/common/store.controller';
+import { defineProps, reactive } from 'vue'
+const props = defineProps(['dict'])
+const { dict } = reactive(props)
+const { dictList } = storeController
+
+const list = dictList.filter(res => res.type === dict)
+console.log(list)
+</script>

package/XklForm.vue

@@ -0,0 +1,133 @@
+<template>
+    <el-form ref="xklForm" :model="form" :label-width="config.labelWidth">
+        <el-row :gutter="20">
+            <template v-for="item in formList" :key="item.key">
+                <el-col v-if="item.show()" :span="item.span || config.span">
+                    <el-form-item :label="item.label" :label-width="item.labelWidth" :rules="item.rules" :prop="item.key">
+                        <slot v-if="item.slot" :name="item.key"></slot>
+                        <div v-else style="width: 100%;display: flex;">
+                            <XklDict v-if="item.dict" v-model="form[item.key]" clearable :placeholder="item.placeholder"
+                                :dict="item.dict" :disabled="item.disabled()"></XklDict>
+                            <XklSelect v-else-if="item.url || item.list" v-model="form[item.key]"
+                                :placeholder="item.placeholder" :config="item" clearable :disabled="item.disabled()">
+                            </XklSelect>
+                            <el-checkbox-group v-else-if="item.boxes" v-model="form[item.key]">
+                                <el-checkbox v-for="box in item.boxes" :label="box.value" :key="box.value">{{ box.label
+                                }}</el-checkbox>
+                            </el-checkbox-group>
+                            <el-radio-group v-else-if="item.radios" v-model="form[item.key]">
+                                <el-radio v-for="rad in item.radios" :label="rad.value" :key="rad.value">{{ rad.label
+                                }}</el-radio>
+                            </el-radio-group>
+                            <el-input type="textarea" v-else-if="item.rows" v-model="form[item.key]"
+                                :placeholder="item.placeholder" :disabled="item.disabled()" :rows="item.rows"
+                                :autosize="item.autosize" :maxlength="item.maxlength" :minlength="item.minlength"
+                                :show-word-limit="item.showWordLimit"></el-input>
+                            <el-input v-else v-model="form[item.key]" :placeholder="item.placeholder"
+                                :disabled="item.disabled()" :maxlength="item.maxlength" :minlength="item.minlength"
+                                :show-word-limit="item.showWordLimit"></el-input>
+                        </div>
+                    </el-form-item>
+                </el-col>
+            </template>
+            <el-col :span="config.span">
+                <slot name="_action"></slot>
+            </el-col>
+        </el-row>
+    </el-form>
+</template>
+
+<script setup lang="ts">
+import { Ref, defineProps, onMounted, reactive, ref, watch } from 'vue'
+import { setUpperFirst } from '@/utils'
+import XklSelect from './XklSelect.vue';
+import XklDict from './XklDict.vue'
+import { RuleItem } from 'async-validator';
+
+const props = defineProps(['form'])
+const { form } = reactive(props)
+
+const formList: Ref = ref([])
+
+const config = form.getConfig()
+const options = form.getOptions()
+const xklForm: Ref = ref(null)
+
+Object.keys(form).forEach(key => {
+    const upperKey = setUpperFirst(key)
+    if (form['get' + upperKey]) {
+        const item = form['get' + upperKey]()
+
+        const placelabel = item.label.replace(':', '').replace('：', '').trim()
+        if (item.dict || item.url || item.list) {
+            item.placeholder = item.placeholder || '请选择' + placelabel
+        } else {
+            item.placeholder = item.placeholder || '请输入' + placelabel
+        }
+
+        item.required = item.required || (() => false)
+        item.show = item.show || (() => true)
+        item.disabled = item.disabled || (() => false)
+
+        if (options.mode === 'search') {
+            item.rules = ref([])
+            if (item.mode === 'search') {
+                formList.value.push({
+                    key: key,
+                    ...item
+                })
+            }
+        } else {
+            if (item.rules) {
+                item.rules = ref(item.rules)
+            } else {
+                item.rules = ref([])
+            }
+
+            if (item.required()) {
+                item.rules.value.push({ required: true, message: '请输入' + placelabel, trigger: 'blur' })
+            }
+
+            watch(item.required, (newVal) => {
+                if (newVal) {
+                    item.rules.value.push({ required: true, message: '请输入' + placelabel, trigger: 'blur' })
+                } else {
+                    item.rules.value = item.rules.value.filter((item: RuleItem) => !item.required)
+                    xklForm.value.clearValidate([key])
+                }
+            })
+            formList.value.push({
+                key: key,
+                ...item
+            })
+        }
+
+    }
+
+    const regProto = () => {
+        let enableSubmit = true
+        form.setSubmit((call: (fn: () => void) => void) => {
+            if (enableSubmit) {
+                enableSubmit = false
+                xklForm.value.validate((valid: boolean) => {
+                    if (valid) {
+                        call(() => {
+                            setTimeout(() => {
+                                enableSubmit = true
+                            }, 300)
+                        })
+                    } else {
+                        enableSubmit = true
+                    }
+                })
+            }
+        })
+        form.setResetFields(xklForm.value.resetFields)
+    }
+
+    onMounted(() => {
+        regProto()
+    })
+})
+
+</script>

package/XklSelect.vue

@@ -0,0 +1,28 @@
+<template>
+    <el-select style="width: 100%;">
+        <el-option v-for="item in dataList" :key="item.key" :label="item[config.labelTarget] || item.label"
+            :value="item[config.valueTarget] || item.value"></el-option>
+    </el-select>
+</template>
+<script setup lang="ts">
+import { Ref, defineProps, reactive, ref } from 'vue';
+import http from '@/utils/httpRequest'
+const props = defineProps(['config'])
+
+const { config } = reactive(props)
+
+const dataList: Ref = ref([])
+
+if (config.list) {
+    dataList.value = config.list
+} else if (config.url) {
+    http({
+        url: http.adornUrl(config.url),
+        method: 'get',
+        params: http.adornParams({})
+    }).then(({ data }) => {
+        dataList.value = data.data
+    })
+}
+
+</script>

package/XklTable.vue

@@ -0,0 +1,25 @@
+<template>
+    <el-table :data="table.list" style="width: 100%">
+        <el-table-column v-if="table.selection" type="selection"></el-table-column>
+        <el-table-column v-for="item in columns" :key="item.prop" :prop="item.prop" :label="item.label"
+            :width="item.width"></el-table-column>
+        <el-table-column fixed="right" :label="operation.label">
+            <template #default="{ row }">
+                <slot name="_operation" :row="row"></slot>
+            </template>
+        </el-table-column>
+        <template #empty>
+            <el-empty description="暂无数据"></el-empty>
+        </template>
+    </el-table>
+</template>
+<script setup lang="ts">
+import { TableColumn, TableOperation } from '@xuekl/cli-base/types';
+import { defineProps, reactive } from 'vue'
+const props = defineProps(['table'])
+const { table } = reactive(props)
+
+const columns: TableColumn[] = table.columns
+const operation: TableOperation = table.operation
+
+</script>

package/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@xuekl/cli-components",
+  "version": "1.0.0",
+  "description": "",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "publishConfig": {
+    "access": "public"
+  }
+}