<template>
|
<a-form-item v-if="item.view === DateTypeEnum.Date" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<template v-if="single_mode === item.mode">
|
<a-date-picker
|
:showTime="false"
|
valueFormat="YYYY-MM-DD"
|
:placeholder="'请选择' + item.label"
|
v-model:value="queryParam[item.field]"
|
></a-date-picker>
|
</template>
|
<template v-else>
|
<a-date-picker
|
:showTime="false"
|
valueFormat="YYYY-MM-DD"
|
placeholder="开始日期"
|
v-model:value="queryParam[item.field + '_begin']"
|
style="width: calc(50% - 15px)"
|
></a-date-picker>
|
<span class="group-query-strig">~</span>
|
<a-date-picker
|
:showTime="false"
|
valueFormat="YYYY-MM-DD"
|
placeholder="结束日期"
|
v-model:value="queryParam[item.field + '_end']"
|
style="width: calc(50% - 15px)"
|
></a-date-picker>
|
</template>
|
</a-form-item>
|
|
<a-form-item v-else-if="item.view === DateTypeEnum.Datetime" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label :title="item.label">
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<template v-if="single_mode === item.mode">
|
<a-date-picker
|
:placeholder="'请选择' + item.label"
|
:show-time="true"
|
valueFormat="YYYY-MM-DD HH:mm:ss"
|
v-model:value="queryParam[item.field]"
|
></a-date-picker>
|
</template>
|
<template v-else>
|
<a-date-picker
|
placeholder="选择开始时间"
|
:show-time="true"
|
valueFormat="YYYY-MM-DD HH:mm:ss"
|
v-model:value="queryParam[item.field + '_begin']"
|
style="width: calc(50% - 9px); min-width: 60px"
|
></a-date-picker>
|
<span class="group-query-strig" style="width: auto; padding: 0 4px">~</span>
|
<a-date-picker
|
placeholder="选择结束时间"
|
:show-time="true"
|
valueFormat="YYYY-MM-DD HH:mm:ss"
|
v-model:value="queryParam[item.field + '_end']"
|
style="width: calc(50% - 9px); min-width: 60px"
|
></a-date-picker>
|
</template>
|
</a-form-item>
|
|
<a-form-item v-else-if="item.view === DateTypeEnum.Time" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<template v-if="single_mode === item.mode">
|
<a-date-picker :placeholder="'请选择' + item.label" mode="time" valueFormat="HH:mm:ss" v-model:value="queryParam[item.field]"></a-date-picker>
|
</template>
|
<template v-else>
|
<a-date-picker
|
placeholder="请选择开始时间"
|
mode="time"
|
valueFormat="HH:mm:ss"
|
v-model:value="queryParam[item.field + '_begin']"
|
style="width: calc(50% - 15px)"
|
></a-date-picker>
|
<span class="group-query-strig">~</span>
|
<a-date-picker
|
placeholder="请选择结束时间"
|
mode="time"
|
valueFormat="HH:mm:ss"
|
v-model:value="queryParam[item.field + '_end']"
|
style="width: calc(50% - 15px)"
|
></a-date-picker>
|
</template>
|
</a-form-item>
|
|
<a-form-item
|
v-else-if="item.view === CompTypeEnum.List || item.view === CompTypeEnum.Radio || item.view === CompTypeEnum.Switch"
|
:labelCol="labelCol"
|
:class="'jeecg-online-search'"
|
>
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<JDictSelectTag v-if="item.config === '1'" :placeholder="'请选择' + item.label" v-model="queryParam[item.field]" :dictCode="getDictCode(item)">
|
</JDictSelectTag>
|
<a-select v-else :placeholder="'请选择' + item.label" v-model:value="queryParam[item.field]">
|
<template v-for="(obj, index) in dictOptions[getDictOptionKey(item)]" :key="index">
|
<a-select-option :value="obj.value"> {{ obj.text }}</a-select-option>
|
</template>
|
</a-select>
|
</a-form-item>
|
|
<a-form-item v-else-if="item.view === CompTypeEnum.SelTree" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<JTreeSelect
|
:placeholder="'请选择' + item.label"
|
v-model:value="queryParam[item.field]"
|
:dict="item.dict"
|
:pidField="item.pidField"
|
:pidValue="item.pidValue"
|
:hasChildField="item.hasChildField"
|
load-triggle-change
|
>
|
</JTreeSelect>
|
</a-form-item>
|
|
<a-form-item v-else-if="item.view === CompTypeEnum.CatTree" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<JCategorySelect :pcode="item.pcode" v-model:value="queryParam[item.field]" :placeholder="'请选择' + item.label" />
|
</a-form-item>
|
|
<a-form-item v-else-if="item.view === CompTypeEnum.SelSearch" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<JOnlineSearchSelect v-model:value="queryParam[item.field]" :placeholder="'请选择' + item.label" :sql="item.sql">
|
</JOnlineSearchSelect>
|
</a-form-item>
|
|
<a-form-item v-else-if="item.view === CompTypeEnum.SelUser" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<JSelectUserByDept v-model:value="queryParam[item.field]" :placeholder="'请选择' + item.label"></JSelectUserByDept>
|
</a-form-item>
|
|
<a-form-item v-else-if="item.view == CompTypeEnum.SelDepart" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<JSelectDept v-model:value="queryParam[item.field]" :placeholder="'请选择' + item.label" />
|
</a-form-item>
|
|
<a-form-item v-else-if="item.view === CompTypeEnum.Popup" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<JPopup
|
:placeholder="'请选择' + item.label"
|
v-model:value="queryParam[item.field]"
|
:formElRef="formElRef"
|
:code="item.dictTable"
|
:field-config="item.dictCode"
|
:multi="true"
|
/>
|
</a-form-item>
|
|
<a-form-item v-else-if="item.view === CompTypeEnum.Pca" :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<JAreaLinkage :placeholder="'请选择' + item.label" v-model:value="queryParam[item.field]" />
|
</a-form-item>
|
<!--TODO 缺少的组件-->
|
<a-form-item
|
v-else-if="item.view === CompTypeEnum.Checkbox || item.view === CompTypeEnum.ListMulti"
|
:labelCol="labelCol"
|
:label="item.label"
|
:class="'jeecg-online-search'"
|
>
|
<!-- <j-select-multiple
|
v-if="item.config==='1'"
|
:placeholder=" '请选择'+item.label "
|
v-model="queryParam[item.field]"
|
:dictCode="getDictCode(item)">
|
</j-select-multiple>
|
<j-select-multiple
|
v-else
|
:placeholder=" '请选择'+item.label "
|
:options="dictOptions[item.dbField]"
|
v-model="queryParam[item.field]">
|
</j-select-multiple>-->
|
</a-form-item>
|
|
<a-form-item v-else :labelCol="labelCol" :class="'jeecg-online-search'">
|
<template #label>
|
<span :title="item.label" class="label-text">{{ item.label }}</span>
|
</template>
|
<template v-if="single_mode === item.mode && 'string'== item.view">
|
<j-input :placeholder="'请输入' + item.label" v-model:value="queryParam[item.field]"></j-input>
|
</template>
|
<template v-else-if="single_mode === item.mode">
|
<a-input :placeholder="'请输入' + item.label" v-model:value="queryParam[item.field]"></a-input>
|
</template>
|
<template v-else>
|
<a-input :placeholder="'请输入开始' + item.label" v-model:value="queryParam[item.field + '_begin']" style="width: calc(50% - 15px)"></a-input>
|
<span class="group-query-strig">~</span>
|
<a-input :placeholder="'请输入结束' + item.label" v-model:value="queryParam[item.field + '_end']" style="width: calc(50% - 15px)"></a-input>
|
</template>
|
</a-form-item>
|
</template>
|
|
<script lang="ts">
|
//import JOnlineSearchSelect from '@/components/online/autoform/comp/JOnlineSearchSelect'
|
import { defineComponent, ref } from 'vue';
|
import { DateTypeEnum } from '/@/enums/DateTypeEnum.ts';
|
import { CompTypeEnum } from '/@/enums/CompTypeEnum.ts';
|
import { JDictSelectTag, JTreeSelect, JCategorySelect, JSelectUserByDept, JSelectDept, JPopup, JAreaLinkage,JInput,JSearchSelect } from '/@/components/Form';
|
export default defineComponent({
|
name: 'JPopupOnlReport',
|
components: {
|
//JOnlineSearchSelect
|
JDictSelectTag,
|
JTreeSelect,
|
JCategorySelect,
|
JSelectUserByDept,
|
JSelectDept,
|
JPopup,
|
JAreaLinkage,
|
JInput,
|
},
|
props: {
|
formElRef: {
|
type: Object,
|
default: () => {},
|
},
|
item: {
|
type: Object,
|
default: () => {},
|
required: true,
|
},
|
dictOptions: {
|
type: Object,
|
default: () => {},
|
required: true,
|
},
|
queryParam: {
|
type: Object,
|
default: () => {},
|
required: true,
|
},
|
},
|
setup(props) {
|
const single_mode = ref('single');
|
console.log('dictOptions===>', props.dictOptions);
|
function getDictCode(item) {
|
if (item.dictTable && item.dictTable.length > 0) {
|
return item.dictTable + ',' + item.dictText + ',' + item.dictCode;
|
} else {
|
return item.dictCode;
|
}
|
}
|
|
function getSqlByDictCode(item) {
|
let { dictTable, dictCode, dictText } = item;
|
let temp = dictTable.toLowerCase();
|
let arr = temp.split('where');
|
let condition = '';
|
if (arr.length > 1) {
|
condition = ' where' + arr[1];
|
}
|
let sql = 'select ' + dictCode + " as 'value', " + dictText + " as 'text' from " + arr[0] + condition;
|
console.log('sql', sql);
|
return sql;
|
}
|
|
function getDictOptionKey(item) {
|
if (item.dbField) {
|
return item.dbField;
|
} else {
|
return item.field;
|
}
|
}
|
|
// 定义查询条件 文本label的最大宽度 比起单纯的控制字体个数更好
|
const labelTextMaxWidth = '120px';
|
const labelCol = {
|
style: {
|
'max-width': labelTextMaxWidth,
|
},
|
};
|
return {
|
labelTextMaxWidth,
|
labelCol,
|
single_mode,
|
getDictOptionKey,
|
getDictCode,
|
getSqlByDictCode,
|
DateTypeEnum,
|
CompTypeEnum,
|
};
|
},
|
});
|
</script>
|
|
<style lang="less" scoped>
|
.group-query-strig {
|
width: 30px;
|
text-align: center;
|
display: inline-block;
|
}
|
|
/* 查询条件左对齐样式设置 */
|
.jeecg-online-search :deep(.ant-form-item-label) {
|
flex: 0 0 auto !important;
|
width: auto;
|
}
|
.jeecg-online-search :deep(.ant-form-item-control) {
|
max-width: 100%;
|
}
|
|
/* label显示宽度 超出显示... */
|
.jeecg-online-search :deep(.label-text) {
|
max-width: v-bind(labelTextMaxWidth);
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow-wrap: break-word;
|
}
|
</style>
|
