281 lines
11 KiB
Vue
281 lines
11 KiB
Vue
<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="1选择开始时间"
|
|
: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="2选择结束时间"
|
|
: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>
|
|
<JDictSelectTag v-if="item.config === '1'" v-model:value="queryParam[item.field]" :placeholder="'请选择' + item.label" :dict="getDictCode(item)"> </JDictSelectTag>
|
|
<!--TODO 新需要的组件-->
|
|
<!-- <j-online-search-select
|
|
v-else
|
|
:ref="item.field+'_search'"
|
|
v-model="queryParam[item.field]"
|
|
:placeholder=" '请选择'+item.label "
|
|
:sql="getSqlByDictCode(item)">
|
|
</j-online-search-select>-->
|
|
</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">
|
|
<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 } from '/@/components/Form';
|
|
export default defineComponent({
|
|
name: 'JPopupOnlReport',
|
|
components: {
|
|
//JOnlineSearchSelect
|
|
JDictSelectTag,
|
|
JTreeSelect,
|
|
JCategorySelect,
|
|
JSelectUserByDept,
|
|
JSelectDept,
|
|
JPopup,
|
|
JAreaLinkage,
|
|
},
|
|
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 ::v-deep .ant-form-item-label {
|
|
flex: 0 0 auto !important;
|
|
width: auto;
|
|
}
|
|
.jeecg-online-search ::v-deep .ant-form-item-control {
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* label显示宽度 超出显示... */
|
|
.jeecg-online-search ::v-deep .label-text {
|
|
max-width: v-bind(labelTextMaxWidth);
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow-wrap: break-word;
|
|
}
|
|
</style>
|