import { computed, defineComponent, onMounted, reactive, ref } from 'vue'
|
import type { Ref } from 'vue'
|
import BaseTable from '@/components/Table/Table'
|
import styles from './$EntityName$.module.scss'
|
import { use$EntityName$ } from '../../../Controllers/$EntityName$'
|
import IconButton from '@/components/IconButton/IconButton'
|
import $EntityName$Drawer from '../Dialog/$EntityName$Drawer/$EntityName$Drawer'
|
import $EntityName$QueryDrawer from '../Dialog/$EntityName$QueryDrawer/$EntityName$QueryDrawer'
|
import Search from '@/components/Search/Search'
|
import { columns } from './Config'
|
import TdButton from '@/components/TdButton/TdButton'
|
import { vPermission } from '@/libs/Permission/Permission'
|
import {
|
getWmsEnumData
|
} from '@/widgets/$EntityName$/Models/Service/$EntityName$Drawer'
|
import {
|
ElInput,
|
ElSelect,
|
ElOption,
|
ElDatePicker,
|
ElForm,
|
ElFormItem,
|
} from 'element-plus'
|
import { injectModel } from '@/libs/Provider/Provider'
|
|
interface RenderTableType {
|
url?: string
|
dataSource: Ref<any[]>
|
isDrag?: boolean
|
isChecked?: boolean
|
isHidePagination?: boolean
|
params?: Record<string, any>
|
autoHeight?: boolean
|
}
|
|
export default defineComponent({
|
name: '$EntityName$',
|
directives: {
|
permission: vPermission,
|
},
|
setup(props, ctx) {
|
const {
|
dataSource,
|
contextMenu,
|
dialogConfig,
|
dialogConfigForQuery,
|
tableRef,
|
current,
|
search,
|
sort,
|
headers,
|
onError,
|
onSearch,
|
onRowClick,
|
onConfirm$EntityName$,
|
onCheck,
|
onAdd$EntityName$,
|
onAdvancedQuery,
|
onExport,
|
openDetail,
|
onSuccess,
|
onBeforeUpload,
|
} = use$EntityName$(props, ctx)
|
|
//¶¨Òå¸ß¼¶²éѯÒýÓÃ
|
const $PageMenuInstanceName$QueryDrawerRef=ref(null);
|
// ÐÂÔöµÄ²éѯÌõ¼þ
|
const queryForm = ref({
|
searchVal: '',
|
str_searchFormInputAttrs:[]
|
})
|
//¶¨ÒåÕûÌåÄ£ºý²éѯµÄÁÐÊý×é(×¢Ò⣺±ØÐë´óСд¸úºó¶ËµÄʵÌåÀàÊôÐÔÃûÒ»Ö£¬·ñÔò»áµ¼ÖÂÆ¥Åä²»¶ÔµÄÎÊÌâ)
|
const _searchFormInputAttrs = ref([
|
$LikeQueryAttrs$
|
]);
|
const searchFormInputAttrs_Placeholder = ref('$LikeQueryAttrsName$');
|
|
|
// ¶¯Ì¬Ã¶¾ÙÑ¡Ïî
|
const enumOptions = reactive({
|
$EntityNameClass_enumOptions$
|
})
|
|
// »ñȡö¾ÙÊý¾Ý
|
const fetchEnumData = async () => {
|
try {
|
$EntityNameClass_fetchEnumData$
|
} catch (error) {
|
console.error('»ñȡö¾ÙÊý¾Ýʧ°Ü:', error)
|
}
|
}
|
|
// ×é¼þ¹ÒÔØʱ»ñȡö¾ÙÊý¾Ý
|
onMounted(() => {
|
fetchEnumData()
|
})
|
|
// ¶¨ÒåÏìӦʽ²éѯÊý¾Ý
|
const _curHighQueryData = ref({ searchVal: '',str_searchFormInputAttrs:[] });
|
// аæµÄ²éѯ·½·¨£¨Ö÷Ò³ÃæÖеİ´Å¥¡¾²éѯ¡¿£©
|
const handleQueryForMain = async () => {
|
_curHighQueryData.value.searchVal = queryForm.value.searchVal;
|
_curHighQueryData.value.str_searchFormInputAttrs = _searchFormInputAttrs.value;
|
tableRef.value.getList(_curHighQueryData.value)
|
}
|
// аæµÄ²éѯ·½·¨£¨¸ß¼¶²éѯÖеİ´Å¥¡¾²éѯ¡¿£©
|
const handleQuery = async (extraParams = {}) => {
|
let filteredData = commonGetHighQueryForm(extraParams);
|
commonSaveCurHighQueryData(filteredData);
|
tableRef.value.getList(filteredData)
|
}
|
// аæµÄ²éѯÖØÖÃ
|
const resetQuery = () => {
|
queryForm.value.searchVal = ''
|
queryForm.value.str_searchFormInputAttrs=_searchFormInputAttrs.value;
|
}
|
//аæµÄµ¼³ö·½·¨
|
const handleExport=()=>{
|
onExport(_curHighQueryData.value);
|
}
|
// аæµÄ²éѯµ¯³ö¿ò¹Ø±Õ·½·¨
|
const closeQuery = (extraParams={}) => {
|
let filteredData = commonGetHighQueryForm(extraParams);
|
console.log("closeQuery·½·¨");
|
console.log(filteredData);
|
commonSaveCurHighQueryData(filteredData);
|
}
|
//±£´æ²éѯֵ
|
const commonSaveCurHighQueryData=(filteredData={})=>{
|
_curHighQueryData.value = { ..._curHighQueryData.value, ...filteredData };
|
_curHighQueryData.value.searchVal = queryForm.value.searchVal
|
_curHighQueryData.value.str_searchFormInputAttrs =_searchFormInputAttrs.value;
|
}
|
//»ñÈ¡¸ß¼¶²éѯµ¯³ö¿òµÄ²éѯֵ
|
const commonGetHighQueryForm=(extraParams={})=>{
|
// ¹ýÂ˵ô undefined µÄÖµ
|
let filteredData = Object.assign(
|
{},
|
...Object.entries(extraParams).map(([key, value]) =>
|
value !== undefined ? { [key]: value } : {}
|
)
|
)
|
//×éºÏÄ£ºý²éѯ
|
filteredData.searchVal = queryForm.value.searchVal
|
filteredData.str_searchFormInputAttrs =_searchFormInputAttrs.value;
|
return filteredData;
|
}
|
|
|
/**
|
* @returns ±í¸ñ
|
*/
|
const RenderBaseTable = (props: RenderTableType) => {
|
const {
|
url,
|
dataSource,
|
isDrag,
|
isChecked,
|
isHidePagination,
|
params,
|
autoHeight,
|
} = props
|
|
return (
|
<div
|
class={{
|
[styles.$PageMenuInstanceName$List]: true,
|
}}
|
>
|
<BaseTable
|
ref={tableRef}
|
url={url}
|
sortUrlTpl="/api/v1/$NameSpacePath$/$PageMenuInstanceName$/{id}/adjustsort/{sort}"
|
v-model:dataSource={dataSource.value}
|
columns={columns}
|
contextMenu={contextMenu}
|
params={params}
|
isDrag={isDrag}
|
isChecked={isChecked}
|
autoHeight={autoHeight}
|
onCheck={onCheck}
|
onRowClick={onRowClick}
|
isHidePagination={isHidePagination}
|
pageSize={20}
|
v-slots={{
|
name: ({ row }: any) => {
|
return row?.name ? (
|
<TdButton
|
onClick={() => openDetail(row)}
|
text={<span style="color:#5a84ff">ÏêÇé</span>}
|
icon="scale"
|
tip={row?.name}
|
hover
|
>
|
{row?.name}
|
</TdButton>
|
) : (
|
'-'
|
)
|
},
|
}}
|
></BaseTable>
|
</div>
|
)
|
}
|
|
return () => {
|
return (
|
<div class={styles.$PageMenuInstanceName$Content}>
|
{/* Ìí¼Ó/±à¼ */}
|
<$EntityName$Drawer
|
v-model={dialogConfig.visible}
|
title={dialogConfig.title}
|
row={current.value}
|
sort={sort.value}
|
onConfirm={onConfirm$EntityName$}
|
/>
|
{/* ¸ß¼¶²éѯ */}
|
<$EntityName$QueryDrawer
|
ref="$PageMenuInstanceName$QueryDrawerRef"
|
v-model={dialogConfigForQuery.visible}
|
title={dialogConfigForQuery.title}
|
row={current.value}
|
sort={sort.value}
|
onConfirmQuery={handleQuery}
|
onRestQuery={resetQuery}
|
onClose={closeQuery}
|
/>
|
|
<div class={styles.headerContent}>
|
<div class={styles.header}>
|
<IconButton
|
v-permission="$PageMenuInstanceName$-add"
|
icon="add-p"
|
onClick={onAdd$EntityName$}
|
type="primary"
|
>
|
Ìí¼Ó
|
</IconButton>
|
<el-divider direction="vertical" />
|
|
<el-divider direction="vertical" />
|
<el-upload
|
v-permission="$PageMenuInstanceName$-import"
|
name="file"
|
accept=".xlsx,.xls,.csv"
|
show-file-list={false}
|
onError={onError}
|
onSuccess={onSuccess}
|
before-upload={onBeforeUpload}
|
headers={headers.value}
|
action="/api/v1/$NameSpacePath$/$PageMenuInstanceName$/import"
|
>
|
<IconButton icon="in">µ¼Èë</IconButton>
|
</el-upload>
|
|
<IconButton
|
v-permission="$PageMenuInstanceName$-output"
|
icon="out"
|
onClick={handleExport}
|
>
|
µ¼³ö
|
</IconButton>
|
</div>
|
<ElFormItem style={{ marginTop: '15px' }}>
|
<ElFormItem label="¹Ø¼ü×Ö">
|
<ElInput
|
v-model={queryForm.value.searchVal}
|
placeholder={searchFormInputAttrs_Placeholder.value}
|
clearable
|
class={styles.formItem}
|
/>
|
</ElFormItem>
|
<IconButton type="primary" icon="search" onClick={handleQueryForMain}>
|
²éѯ
|
</IconButton>
|
{/* <IconButton style="" icon="refresh" onClick={resetQuery}>
|
ÖØÖÃ
|
</IconButton> */}
|
<IconButton
|
v-permission="$PageMenuInstanceName$-add"
|
icon="search"
|
onClick={onAdvancedQuery}
|
type="primary"
|
>
|
¸ß¼¶²éѯ
|
</IconButton>
|
</ElFormItem>
|
</div>
|
|
<RenderBaseTable
|
url="/api/v1/$NameSpacePath$/$PageMenuInstanceName$/page"
|
dataSource={dataSource}
|
isChecked={true}
|
isDrag={true}
|
/>
|
</div>
|
)
|
}
|
},
|
})
|
