@xuekl/cli-components 1.8.0 → 1.9.145

package/XklForm.vue

@@ -1,58 +1,101 @@
 <template>
-    <el-form ref="XklFormRef" :model="form" :label-width="opts.labelWidth" v-bind="formProps"
+    <el-form ref="XklFormRef" :model="form" :label-width="labelWidth()" v-bind="formProps"
         @keyup.enter.native="enterSubmit()">
         <div class="hide-input">
-            <input type="text" />
-            <input type="password" />
+            <el-input></el-input>
+        </div>
+        <div v-if="table" class="history-link">
+
+            <div class="save-handle">
+                <div class="save-tip" v-if="!isDoSave && !isDoHistory">
+                    <div>
+                        您可以<el-link type="primary" class="ml-4 mr-4 " @click="toSave()">保存</el-link>当前查询条件，并可以在 <el-link
+                            type="success" class="ml-4 mr-4" @click="toHistory()">历史记录</el-link>中查看以便于快捷查询。
+                    </div>
+                    <div v-if="attrs.onAdvanced">
+                        <span>或者在 <el-link class="ml-4 mr-4" type="danger"
+                                @click="advancedQuery()">高级查询</el-link>中定制查询条件。</span>
+                    </div>
+                </div>
+                <div v-if="isDoSave" class="do_save">
+                    <el-link class="mr-10 fs-18" @click="back()"><icon-svg name="back"></icon-svg></el-link>
+                    <el-input class="w-200" v-model="queryName" :maxlength="20" placeholder="命名当前查询条件" size="small"
+                        clearable></el-input>
+                    <el-link type="primary" class="ml-10" @click="doSave()">保存</el-link>
+                </div>
+                <div v-if="isDoHistory" class="do_save">
+                    <el-link class="mr-10 fs-18" @click="back()"><icon-svg name="back"></icon-svg></el-link>
+                    <div v-if="isToDelete" class="history-list">
+                        <span class="delete-item" :title="item.label" v-for="item in histories"
+                            @click="deleteHistory(item)">{{ item.label }}</span>
+                    </div>
+                    <xkl-select style="width: 2rem!important;" v-else v-model="historyId" placeholder="选择一条历史记录"
+                        :config="historySelectConfig" :cache="false" size="small" @item-change="doHistory"
+                        @loaded="historyLoaded"></xkl-select>
+                    <el-link v-if="!isToDelete" class="ml-10 fs-14" @click="toDelete()"><icon-svg
+                            name="delete"></icon-svg></el-link>
+                </div>
+            </div>
         </div>
         <el-row>
             <template v-for="item in formList" :key="item.prop">
                 <el-col :span="item.span" v-if="item.show()">
-                    <el-form-item :label="item.label" :label-width="item.labelWidth" :prop="item.prop"
+                    <el-form-item :label="item.label" :label-width="labelWidth(item)" :prop="item.prop"
                         :rules="item.refRules">
-                        <el-input v-if="item.type === 'input'" v-model="form[item.prop]" v-bind="item.element"
-                            v-on="item.events" :disabled="item.disabled()"></el-input>
-                        <el-input-number v-else-if="item.type === 'input-number'" v-model="form[item.prop]"
-                            v-bind="item.element" v-on="item.events" :disabled="item.disabled()"
-                            style="width: 100%;"></el-input-number>
-                        <el-input v-else-if="item.type === 'textarea'" v-model="form[item.prop]" v-bind="item.element"
-                            :disabled="item.disabled()" v-on="item.events" type="textarea"></el-input>
-                        <XklSelect v-else-if="item.type === 'select'" v-model="form[item.prop]"
-                            v-model:label="form[item.prop + 'Label']" :list="item.list" :config="{}" v-bind="item.element"
-                            v-on="item.events" :disabled="item.disabled()">
-                        </XklSelect>
-                        <XklDict v-else-if="item.type === 'dict-select'" v-model="form[item.prop]"
-                            v-model:label="form[item.prop + 'Label']" :config="item.config" v-bind="item.element"
-                            v-on="item.events" :disabled="item.disabled()"></XklDict>
-                        <XklSelect v-else-if="item.type === 'url-select'" v-model="form[item.prop]" :key="item.key()"
-                            v-model:label="form[item.prop + 'Label']" :config="item.config" v-bind="item.element"
-                            v-on="item.events" :disabled="item.disabled()">
-                        </XklSelect>
-                        <XklTreeSelect v-else-if="item.type === 'tree-select'" v-model="form[item.prop]"
-                            :config="item.config" v-bind="item.element" v-on="item.events" :disabled="item.disabled()">
-                        </XklTreeSelect>
-                        <el-radio-group v-else-if="item.type === 'radio'" v-model="form[item.prop]" v-bind="item.element"
-                            v-on="item.events" :disabled="item.disabled()">
-                            <el-radio v-for="ra in item.list" :label="ra.value" :key="ra.value">{{ ra.label }}</el-radio>
-                        </el-radio-group>
-                        <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="form[item.prop]"
-                            v-bind="item.element" v-on="item.events" :disabled="item.disabled()">
-                            <el-checkbox v-for="ch in item.list" :label="ch.value" :key="ch.value">{{ ch.label
-                            }}</el-checkbox>
-                        </el-checkbox-group>
-                        <XklDatePicker v-else-if="item.type === 'date-picker'" v-model="form[item.prop]"
-                            v-bind="item.element" v-on="item.events" style="width: 100%;"></XklDatePicker>
-                        <XklUpload v-else-if="item.type === 'upload'" :key="form[item.prop].length > 0"
-                            v-model="form[item.prop]" :config="item.config" v-bind="item.element" v-on="item.events">
-                        </XklUpload>
-                        <slot v-else :name="item.prop"></slot>
+                        <div class="xkl-item-inner">
+                            <el-input v-if="item.type === 'input'" v-model="form[item.prop]" v-bind="item.element"
+                                v-on="item.events" :disabled="item.disabled()"></el-input>
+                            <el-input-number v-else-if="item.type === 'input-number'" v-model="form[item.prop]"
+                                v-bind="item.element" v-on="item.events" :disabled="item.disabled()"
+                                style="width: 100%;"></el-input-number>
+                            <el-input v-else-if="item.type === 'textarea'" v-model="form[item.prop]"
+                                v-bind="item.element" :disabled="item.disabled()" v-on="item.events"
+                                type="textarea"></el-input>
+                            <XklSelect v-else-if="item.type === 'select'" v-model="form[item.prop]"
+                                v-model:label="form[item.prop + 'Label']" :list="item.list" :config="{}"
+                                v-bind="item.element" v-on="item.events" :disabled="item.disabled()">
+                            </XklSelect>
+                            <XklDict v-else-if="item.type === 'dict-select'" v-model="form[item.prop]"
+                                v-model:label="form[item.prop + 'Label']" :config="item.config" v-bind="item.element"
+                                v-on="item.events" :disabled="item.disabled()"></XklDict>
+                            <XklSelect v-else-if="item.type === 'url-select'" v-model="form[item.prop]"
+                                :key="item.key()" v-model:label="form[item.prop + 'Label']" :config="item.config"
+                                v-bind="item.element" v-on="item.events" :disabled="item.disabled()">
+                            </XklSelect>
+                            <XklTreeSelect v-else-if="item.type === 'tree-select'" v-model="form[item.prop]"
+                                :config="item.config" v-bind="item.element" v-on="item.events"
+                                :disabled="item.disabled()">
+                            </XklTreeSelect>
+                            <el-radio-group v-else-if="item.type === 'radio'" v-model="form[item.prop]"
+                                v-bind="item.element" v-on="item.events" :disabled="item.disabled()">
+                                <el-radio v-for="ra in item.list" :label="ra.value" :key="ra.value">{{ ra.label
+                                    }}</el-radio>
+                            </el-radio-group>
+                            <el-checkbox-group v-else-if="item.type === 'checkbox'" v-model="form[item.prop]"
+                                v-bind="item.element" v-on="item.events" :disabled="item.disabled()">
+                                <el-checkbox v-for="ch in item.list" :label="ch.value" :key="ch.value">{{ ch.label
+                                    }}</el-checkbox>
+                            </el-checkbox-group>
+                            <XklDatePicker v-else-if="item.type === 'date-picker'" v-model="form[item.prop]"
+                                v-bind="item.element" v-on="item.events" style="width: 100%;"
+                                :disabled="item.disabled()">
+                            </XklDatePicker>
+                            <XklUpload v-else-if="item.type === 'upload'" :key="form[item.prop].length > 0"
+                                v-model="form[item.prop]" :config="item.config" v-bind="item.element"
+                                v-on="item.events">
+                            </XklUpload>
+                            <slot v-else :name="item.prop"></slot>
+                            <slot :name="item.prop + 'Suffix'"></slot>
+                        </div>
                     </el-form-item>
                 </el-col>
             </template>
-            <el-col :span="searchSpan">
+            <el-col v-if="opts.queryVisible !== false" :span="searchSpan">
                 <el-form-item label-width="0">
                     <div class="query-action">
-                        <slot name="_action"></slot>
+                        <div @click.capture="actionClick()">
+                            <slot name="_action"></slot>
+                        </div>
                         <span class="collapsible" v-if="opts.collapsible" @click="doCollapse()">
                             {{ isCollapse ? '展开' : '收起' }}
                             <icon-svg name="down" :class="[isCollapse ? '' : 'rotate']"></icon-svg>
@@ -61,6 +104,9 @@
                 </el-form-item>
             </el-col>
         </el-row>
+        <AdvancedQuery ref="advancedQueryRef" v-if="advanceQueryShow" :form="form" :table="table"
+            @advanced="advancedHandle" @reset="resetHandle">
+        </AdvancedQuery>
     </el-form>
 </template>
 <script lang="ts">
@@ -71,33 +117,60 @@ export default {
 <script setup lang="ts">
 import { setUpperFirst } from '@xuekl/cli-utils'
 import { FormItem } from '@xuekl/cli-base/type.d'
-import { ref, watch, onMounted, Ref } from 'vue'
+import { ref, watch, onMounted, Ref, computed, shallowRef, DefineComponent, defineComponent, h, nextTick, useAttrs, onBeforeUnmount, onUnmounted } from 'vue'
+import { useRoute } from 'vue-router'
 import XklSelect from './XklSelect.vue'
 import XklTreeSelect from './XklTreeSelect.vue'
 import XklDict from './XklDict.vue'
 import XklDatePicker from './XklDatePicker.vue'
 import { formConf } from './index'
+import http from '@/utils/httpRequest'
+import { ElMessage } from 'element-plus'
+const startLoading = window.startLoading
+const finishLoading = window.finishLoading
 
-const props = defineProps(['form'])
+const props = defineProps(['form', 'table'])
 const emit = defineEmits(['enter'])
+const attrs: any = useAttrs()
+const route = useRoute()
 const XklFormRef = ref(null)
-const { form } = props
+const { form, table } = props
 const sourceFormList: FormItem[] = []
 const formList: Ref<FormItem[]> = ref([])
 const opts = form._opts || {}
 const isCollapse = ref(true)
+let isByAdvanced = false // 通过高级查询
+let conditionItemList: any[] = [] // 通过高级查询
 if (typeof opts.defaultCollapse !== 'undefined') {
     isCollapse.value = opts.defaultCollapse
 }
+const formConfig = formConf || {} as any
+const formProps = Object.assign({}, formConfig.element, opts.element)
+
+form._isAlive = true
+
+const labelWidth = computed(() => {
+    const docEl = document.documentElement
+    const width = docEl.getBoundingClientRect().width;
+    const rem = width / 10;
+    return (item?) => {
+        if (item && item.labelWidth) {
+            return ((item.labelWidth / rem) * (rem / 100)) + 'rem'
+        }
+        return ((opts.labelWidth / rem) * (rem / 100)) + 'rem'
+    }
+})
 
-const formProps = Object.assign({}, formConf?.element, opts.element)
 
 const enterSubmit = () => {
     emit('enter')
 }
 // 获取符合mode的字段
-const modeFields: any = {}
-Object.keys(form).forEach(prop => {
+let modeFields: any = {}
+form._sort = form._sort || []
+let formKeys = Object.keys(form)
+formKeys = [...form._sort, ...formKeys.filter(key => !form._sort.includes(key))]
+formKeys.forEach(prop => {
     if (form['get' + setUpperFirst(prop)]) {
         let field: FormItem = form['get' + setUpperFirst(prop)]()
         if (['query', 'search'].includes(opts.mode)) {
@@ -113,12 +186,13 @@ Object.keys(form).forEach(prop => {
         field.key = field.key || (() => prop)
         field.disabled = field.disabled || (() => false)
         const placeholderStart = ['input', 'textarea'].includes(field.type) ? '请输入' : '请选择'
+        const placeholder = placeholderStart + field.label.replace(':', '').replace('：', '')
         if (!['query', 'search'].includes(opts.mode)) {
             if (field.required) {
                 // 如果穿了required函数监听required的变化
                 watch(field.required, (val) => {
                     if (val) {
-                        field.refRules.value.push({ required: true, message: placeholderStart + field.label, trigger: 'blur' })
+                        field.refRules.value.push({ required: true, message: placeholder, trigger: 'blur' })
                     } else {
                         field.refRules.value = field.refRules.value.filter(res => !res.required)
                     }
@@ -126,21 +200,21 @@ Object.keys(form).forEach(prop => {
             }
             field.required = field.required || (() => false)
             if (field.required()) {
-                field.refRules.value.push({ required: true, message: placeholderStart + field.label, trigger: 'blur' })
+                field.refRules.value.push({ required: true, message: placeholder, trigger: 'blur' })
             }
         } else {
             field.refRules.value = field.refRules.value.filter(res => !res.required)
         }
         if (!field.element) {
             field.element = {
-                placeholder: placeholderStart + field.label.replace(':', '').replace('：', ''),
+                placeholder: placeholder,
                 clearable: true
             }
             if (opts.placeholder === false) {
                 field.element.placeholder = ''
             }
         } else {
-            field.element.placeholder = field.element.placeholder || placeholderStart + field.label.replace(':', '').replace('：', '')
+            field.element.placeholder = field.element.placeholder || placeholder
             field.element.clearable = typeof field.element.clearable === 'undefined' ? true : field.element.clearable
             if (opts.placeholder === false) {
                 field.element.placeholder = ''
@@ -223,6 +297,9 @@ if (opts.collapsible) {
 }
 
 
+const actionClick = () => {
+    isByAdvanced = false
+}
 
 const doCollapse = () => {
     isCollapse.value = !isCollapse.value
@@ -248,9 +325,15 @@ const regProto = () => {
                 });
                 (XklFormRef.value as any).validate((valid: boolean) => {
                     if (valid) {
+                        if (form.enableLoading && startLoading) {
+                            startLoading()
+                        }
                         callback(() => {
                             setTimeout(() => {
                                 enableSubmit = true
+                                if (finishLoading) {
+                                    finishLoading()
+                                }
                             }, 300)
                         }, modeFields)
                     } else {
@@ -261,21 +344,219 @@ const regProto = () => {
         }
     }
 
-    form.getBinds = () => {
-        sourceFormList.forEach(field => {
-            modeFields[field.prop] = (form as any)[field.prop]
-        });
+    form.getBinds = (extraForBinds: Object = {}, forAdvanced: string[] = []) => {
+        modeFields = {}
+        let forBinds: any = {}
+        if (isByAdvanced) {
+            if (forAdvanced.length) {
+                forAdvanced.forEach(key => {
+                    // 如果高级查询列表中，不存在对应需要补充的键值，才可进行补充
+                    const conditionItem: any = conditionItemList.find(res => res.field
+                        && ((res.field.includes(key) || key.includes(res.field))
+                            || (res.field.includes('logOperationOrg') && key.includes('logOperationOrg')))
+                        && ['in', 'eq'].includes(res.regulation))
+                    if (!conditionItem) {
+                        if (extraForBinds.hasOwnProperty(key)) {
+                            forBinds[key] = extraForBinds[key]
+                        } else {
+                            forBinds[key] = (form as any)[key]
+                        }
+                    } else {
+                        if (Array.isArray((form as any)[key])) {
+                            if (conditionItem.multipleValue.length) {
+                                forBinds[key] = conditionItem.multipleValue
+                            } else {
+                                forBinds[key] = [conditionItem.fieldValue1]
+                            }
+
+                        } else {
+                            if (conditionItem.multipleValue.length) {
+                                forBinds[key] = conditionItem.multipleValue[0]
+                            } else {
+                                forBinds[key] = conditionItem.fieldValue1
+                            }
+                        }
+                    }
+                })
+            } else {
+                forBinds = extraForBinds
+            }
+            modeFields.conditionItemList = conditionItemList
+        } else {
+            forBinds = extraForBinds
+            sourceFormList.forEach(field => {
+                modeFields[field.prop] = (form as any)[field.prop]
+            });
+        }
+        Object.assign(modeFields, forBinds)
         return modeFields
     }
 
     form.getRef = () => XklFormRef.value
 }
 
+const queryName = ref('')
+const historyId = ref('')
+const histories: any = ref([])
+const isDoSave = ref(false)
+const isDoHistory = ref(false)
+const isToDelete = ref(false)
+const queryCondition = ref({})
+
+const historySelectConfig = ref({
+    url: formConfig.historyApi.query || '/base/mgt/queryMemory/queryMemorySelector',
+    // valueTarget: 'expandField1',
+    params: () => ({
+        pageId: route.name,
+        tableId: table.id
+    })
+})
+
+const toSave = () => {
+    isDoSave.value = true
+}
+const doSave = () => {
+    if (!props.table) {
+        ElMessage.warning("请绑定一个被查询的表格")
+        return
+    }
+    if (!queryName.value) {
+        ElMessage.warning("请输入名称")
+        return
+    }
+    http({
+        url: http.adornUrl(formConfig.historyApi.add || '/base/mgt/queryMemory/add'),
+        method: 'post',
+        data: http.adornData({
+            pageId: route.name,
+            tableId: table.id,
+            queryName: queryName.value,
+            queryCondition: JSON.stringify(form.getBinds())
+        })
+    }).then(({ data }) => {
+        if (data.code === '0') {
+            isDoSave.value = false
+            queryName.value = ''
+            ElMessage.success("保存成功")
+        } else {
+            ElMessage.error(data.message)
+        }
+    })
+}
+
+const historyLoaded = (list) => {
+    histories.value = list
+}
+
+const toHistory = () => {
+    isDoHistory.value = true
+}
+
+const doHistory = (item) => {
+    if (item) {
+        queryCondition.value = JSON.parse(item.expandField1)
+        form.setForm(queryCondition.value)
+    } else {
+        form.clear()
+    }
+}
+
+const toDelete = () => {
+    if (!histories.value.length) {
+        ElMessage.warning("暂无历史记录")
+        return
+    }
+    isToDelete.value = true
+}
+
+const deleteHistory = (item) => {
+    http({
+        url: http.adornUrl(`${formConfig.historyApi.delete || '/base/mgt/queryMemory/deleteByIds'}/${item.value}`),
+        method: 'get',
+        params: http.adornParams({
+        })
+    }).then(({ data }) => {
+        if (data.code === '0') {
+            histories.value = histories.value.filter(res => res.value !== item.value)
+            if (historyId.value === item.value) {
+                historyId.value = ''
+            }
+            if (!histories.value.length) {
+                back()
+            }
+            ElMessage.success("删除成功")
+        } else {
+            ElMessage.error(data.message)
+        }
+    })
+}
+
+const back = () => {
+    if (isToDelete.value) {
+        isToDelete.value = false
+        return
+    }
+    isDoSave.value = false
+    isDoHistory.value = false
+    historyId.value = ''
+}
+
+let clear = form.clear.bind(form)
+
+form.clear = () => {
+    // if (!isByAdvanced) {
+
+    clear()
+    historyId.value = ''
+    // }
+    // modeFields.conditionItemList = []
+    // advancedQueryRef.value?.resetData()
+}
+
+const advanceQueryShow = ref(false)
+const advancedQueryRef = ref()
+
+const advancedQuery = () => {
+    advanceQueryShow.value = true
+    nextTick(() => {
+        advancedQueryRef.value.init(form, table)
+    })
+}
+
+const advancedHandle = (conditions) => {
+    // modeFields.conditionItemList = conditions
+    // emit('advanced', conditions)
+    isByAdvanced = true
+    conditionItemList = conditions
+    attrs.onAdvanced(conditions)
+    //modeFields.conditionItemList = []
+}
+
+const resetHandle = (conditions) => {
+    // modeFields.conditionItemList = conditions
+    isByAdvanced = true
+    conditionItemList = conditions
+    attrs.onReset(conditions)
+}
+
 onMounted(() => {
     regProto()
+    if (form.defaultAdvance) {
+        advanceQueryShow.value = true
+        nextTick(() => {
+            advancedQueryRef.value.useDefaultValues(form, table)
+        })
+    }
 })
 
-
+onBeforeUnmount(() => {
+    form.clear = clear
+    form.submit = null
+    form.getRef = null
+    form._isAlive = false
+    // form.getBinds = null
+    // sourceFormList.length = 0
+})
 
 </script>
 <style lang="scss" scoped>
@@ -301,4 +582,82 @@ onMounted(() => {
     position: absolute;
     left: -5000px;
 }
+
+.xkl-item-inner {
+    width: 100%;
+    display: flex;
+    align-items: center;
+}
+
+.history-link {
+    display: flex;
+    justify-content: flex-end;
+    align-items: center;
+    // padding-bottom: 18px;
+    font-size: 14px;
+    color: #666;
+    min-height: 26px;
+    margin-bottom: 18px;
+
+    .do_save {
+        // width: 300px;
+        display: flex;
+        align-items: center;
+    }
+
+    .save-handle {
+        display: flex;
+        align-items: center;
+    }
+
+    .save-tip {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        justify-content: flex-end;
+        gap: 6px;
+    }
+}
+
+.history-list {
+    border: 1px solid #f0f2f5;
+    max-height: 100px;
+    overflow-y: auto;
+    padding: 5px;
+    // width: 300px;
+
+    .delete-item {
+        display: inline-block;
+        padding: 2px 5px;
+        background-color: #f0f2f5;
+        margin-right: 5px;
+        margin-bottom: 5px;
+        border-radius: 4px;
+        font-size: 12px;
+        cursor: pointer;
+        max-width: 200px;
+        text-overflow: ellipsis;
+        overflow: hidden;
+        white-space: nowrap;
+        position: relative;
+        padding-right: 22px;
+
+        &::after {
+            content: 'x';
+            display: inline-flex;
+            color: #909399;
+            height: 16px;
+            width: 16px;
+            border-radius: 8px;
+            font-size: 12px;
+            align-items: center;
+            justify-content: center;
+            margin-left: 5px;
+            position: absolute;
+            right: 0;
+            top: 50%;
+            transform: translateY(-50%);
+        }
+    }
+}
 </style>