sfms3.0
/
sfms3.0-ui
3
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

详情组件修改 tabs

master
陈薪名 1 year ago
parent
5488e982c7
commit
04740f28db
1 changed files with 185 additions and 109 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 288
      src/components/Detail/src/Detail.vue

288
src/components/Detail/src/Detail.vue
View File

@ -1,69 +1,100 @@
<template>
<div>
<el-drawer v-model="isShowDrawer" title="详情" direction="rtl" size="80%" v-loading="detailLoading">
<template #header>
<div class="font-size-18px">
{{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
</div>
</template>
<ContentWrap v-if="!isBasic">
<Descriptions :data="detailData" labelClassName="label-class-name" label-align="left" direction="vertical"
:column="8" :schema="allSchemas.detailSchema" :columns="2" width="200px" />
</ContentWrap>
<Tabs :tabsList="tabsList" :current="current" @change="change" />
<div class="flex" v-if="current == 0">
<!-- 详情 -->
<ContentWrap class="w-[73%]">
<!-- 列表头部 -->
<TableHead
v-if="!isBasic"
:HeadButttondata="HeadButttondata"
:masterId="masterParmas.masterId"
@button-base-click="buttonBaseClick"
:routeName="routeName"
@searchFormClick="searchFormClick"
:allSchemas="detailAllSchemas"
<el-drawer
v-model="isShowDrawer"
title="详情"
direction="rtl"
size="80%"
v-loading="detailLoading"
>
<template #header>
<div class="font-size-18px">
{{ titleValueRef }} <span class="ml-20px font-size-16px">{{ titleNameRef }}</span>
</div>
</template>
<ContentWrap v-if="!isBasic">
<Descriptions
:data="detailData"
labelClassName="label-class-name"
label-align="left"
direction="vertical"
:column="8"
:schema="allSchemas.detailSchema"
:columns="2"
width="200px"
/>
<Descriptions v-if="isBasic" :data="detailData" :schema="allSchemas.detailSchema" :columns="2" />
<Table
v-if="!isBasic"
:columns="detailAllSchemas.tableColumns"
:data="tableObject.tableList"
:loading="tableObject.loading"
:pagination="{ total: tableObject.total }"
v-model:pageSize="tableObject.pageSize"
v-model:currentPage="tableObject.currentPage" >
<template #action="{ row }">
<ButtonBase :Butttondata="buttondata" @button-base-click="buttonTableClick($event, row)" />
</template>
</Table>
</ContentWrap>
<ContentWrap class="w-[27%] ml-16px">
<!-- 附件组件 -->
<Annex :annexData="annexData" @handleAnnexSuccess="handleAnnexSuccess" @deleteAnnexSuccess="deleteAnnexSuccess" :upData="remarksData.data"/>
<!-- 备注组件 -->
<Remarks :remarksData="remarksData" class="mt-20px"
@remarksSubmitScuess="remarksSubmitScuess" />
<!-- 变更记录组件 -->
<ChangeRecord :changeRecordData="changeRecordData" class="mt-20px" />
</ContentWrap>
</div>
</el-drawer>
<!-- 表单弹窗：添加/修改 -->
<BasicForm
ref="formRef"
@success="getList"
:rules="detailAllSchemasRules"
:formAllSchemas="detailAllSchemas"
:isBusiness="false"
:apiUpdate="apiUpdate"
:apiCreate="apiCreate"
@searchTableSuccess="searchTableSuccess"
:detailData="detailData"
@submitForm="submitForm"
/>
</div>
<Tabs :tabsList="tabsList" :current="current" @change="change" />
<div class="flex">
<!-- 详情 -->
<ContentWrap class="w-[73%]">
<!-- 列表头部 -->
<TableHead
v-if="!isBasic"
:HeadButttondata="HeadButttondata"
:masterId="masterParmas.masterId"
@button-base-click="buttonBaseClick"
:routeName="routeName"
@searchFormClick="searchFormClick"
:allSchemas="detailAllSchemas"
/>
<Descriptions
v-if="isBasic"
:data="detailData"
:schema="allSchemas.detailSchema"
:columns="2"
/>
<Table
v-if="!isBasic"
:columns="detailAllSchemasRef.tableColumns"
:data="tableObjectRef.tableList"
:loading="tableObjectRef.loading"
:pagination="{ total: tableObjectRef.total }"
v-model:pageSize="tableObjectRef.pageSize"
v-model:currentPage="tableObjectRef.currentPage"
>
<template #action="{ row }">
<ButtonBase
:Butttondata="buttondata"
@button-base-click="buttonTableClick($event, row)"
/>
</template>
</Table>
</ContentWrap>
<ContentWrap class="w-[27%] ml-16px">
<!-- 附件组件 -->
<Annex
:annexData="annexData"
@handleAnnexSuccess="handleAnnexSuccess"
@deleteAnnexSuccess="deleteAnnexSuccess"
:upData="remarksData.data"
/>
<!-- 备注组件 -->
<Remarks
:remarksData="remarksData"
class="mt-20px"
@remarksSubmitScuess="remarksSubmitScuess"
/>
<!-- 变更记录组件 -->
<ChangeRecord :changeRecordData="changeRecordData" class="mt-20px" />
</ContentWrap>
</div>
</el-drawer>
<!-- 表单弹窗：添加/修改 -->
<BasicForm
ref="formRef"
@success="submitForm"
:rules="detailAllSchemasRules"
:formAllSchemas="detailAllSchemas"
:isBusiness="false"
:apiUpdate="apiUpdate"
:apiCreate="apiCreate"
@searchTableSuccess="searchTableSuccess"
:detailData="detailData"
@submitForm="submitForm"
/>
</div>
</template>
<script lang="ts" setup>
@ -85,7 +116,7 @@ const { t } = useI18n() // 国际化
const route = useRoute() // 路由信息
const routeName = ref()
routeName.value = route.name
routeName.value = routeName.value.substring(0,routeName.value.length - 4) + 'Detail'
routeName.value = routeName.value.substring(0, routeName.value.length - 4) + 'Detail'
const props = defineProps({
// 标签参数
@ -147,22 +178,31 @@ const props = defineProps({
type: Array,
required: false,
default: null
},
}
})
const isShowDrawer = ref(false)
const detailLoading = ref(false)
const tabsList = ref(JSON.parse(JSON.stringify(props.tabs ? props.tabs : '')))
if (tabsList.value && tabsList.value.length > 0) {
tabsList.value.unshift({
label: '详情',
prop: 'Detail'
})
if (props.isBasic == true) {
if (tabsList.value && tabsList.value.length > 0) {
tabsList.value.unshift({
label: '详情',
prop: 'Detail'
})
}
} else {
tabsList.value = [{
label: '明细',
prop: 'Detail'
}]
if (tabsList.value && tabsList.value.length > 0) {
} else {
tabsList.value = [
{
label: '明细',
prop: 'Detail'
}
]
}
}
if (tabsList.value) {
}
// 附件默认数据
@ -173,14 +213,14 @@ const annexData = reactive({
// 备注数据
const remarksData = reactive({
remarksList: [],
data:{}
data: {}
})
// 变更记录默认数据
const changeRecordData = reactive({
changeRecordList: []
})
const detailData = ref({})//详情数据
const detailData = ref({}) //详情数据
// 获取附件列表篇
const getFileList = async () => {
detailLoading.value = true
@ -194,11 +234,9 @@ const getFileList = async () => {
const handleAnnexSuccess = () => {
getFileList()
getChangeRecordList()
}
// 删除附件成功之后所走的方法
const deleteAnnexSuccess = async () => {
getFileList()
getChangeRecordList()
}
@ -207,13 +245,14 @@ const deleteAnnexSuccess = async () => {
const current = ref(0)
const change = (item, index) => {
current.value = index
emit('changeTabs', item)
}
//主表所需的参数
const masterParmas=ref({
masterId:'',//主表id
number: '',//主表单据号
status: '',//主表状态 用于控制子表新增编辑按钮显示情况
const masterParmas = ref({
masterId: '', //主表id
number: '', //主表单据号
status: '' //主表状态 用于控制子表新增编辑按钮显示情况
})
// 列表头部按钮
@ -229,16 +268,16 @@ const openDetail = async (row: any, titleName: any, titleValue: any, tableName:
titleValueRef.value = titleValue
remarksData.data = {
tableId: row.id,
tableName: tableName,
tableName: tableName
}
// 加载明细列表
if(!props.isBasic) {
if (!props.isBasic) {
// 设置主表id
masterParmas.value.masterId = row.id
masterParmas.value.number = row.number
masterParmas.value.status = row.status
tableObject.params = {
masterId: row.id,
tableObjectRef.value.params = {
masterId: row.id
}
getList()
}
@ -252,13 +291,19 @@ const openDetail = async (row: any, titleName: any, titleValue: any, tableName:
getChangeRecordList()
// 判断详情新增按钮是否显示
HeadButttondata.value = [
defaultButtons.defaultAddBtn({hide:isShowMainButton(row,['1','1','PLAN_PURCHASE_READY','1'])}), // 新增
defaultButtons.defaultFilterBtn(null), // 筛选
defaultButtons.defaultAddBtn({
hide: isShowMainButton(row, ['1'])
}), // 新增
defaultButtons.defaultFilterBtn(null) // 筛选
]
// 动态显示操作列按钮
buttondata.value = [
defaultButtons.mainListEditBtn({hide:isShowMainButton(row,['1','1','PLAN_PURCHASE_READY','1'])}), // 编辑
// defaultButtons.mainListDeleteBtn({hide:isShowMainButton(row,['1','1','PLAN_PURCHASE_READY','1'])}), // 删除
defaultButtons.mainListEditBtn({
hide: isShowMainButton(row, ['1'])
}), // 编辑
defaultButtons.mainListDeleteBtn({
hide: isShowMainButton(row, ['1'])
}) // 删除
]
} finally {
detailLoading.value = false
@ -287,12 +332,21 @@ const getChangeRecordList = async () => {
changeRecordData.changeRecordList = await RemarkApi.getChangeRecordPage(remarksData.data)
}
const tableObjectRef = ref()
const tableMethodsRef = ref()
const detailAllSchemasRef = ref()
const { tableObject, tableMethods } = useTable({
getListApi: props.apiPage // 分页接口
})
tableObjectRef.value = tableObject
tableMethodsRef.value = tableMethods
detailAllSchemasRef.value = props.detailAllSchemas
// 根据状态返回该按钮是否显示
const isShowMainButton = (row,val) => {
const isShowMainButton = (row, val) => {
if (val.indexOf(row.status) > -1) {
return false
} else {
@ -300,22 +354,27 @@ const isShowMainButton = (row,val) => {
}
}
// 获得表格的各种操作
const { getList } = tableMethods
const { getList } = tableMethodsRef.value
// 头部按钮事件
const buttonBaseClick = (val, item) => {
if (val == 'add') { // 新增
if (val == 'add') {
// 新增
openForm('create')
} else if (val == 'import') { // 导入
} else if (val == 'import') {
// 导入
handleImport()
} else if (val == 'export') { // 导出
} else if (val == 'export') {
// 导出
handleExport()
} else if (val == 'refresh') { // 刷新
} else if (val == 'refresh') {
// 刷新
getList()
} else if (val == 'filtrate') { // 筛选
} else { // 其他按钮
} else if (val == 'filtrate') {
// 筛选
} else {
// 其他按钮
console.log('其他按钮', item)
}
}
@ -327,9 +386,11 @@ const buttonBaseClick = (val, item) => {
// 列表-操作按钮事件
const buttonTableClick = async (val, row) => {
if (val == 'edit') { // 编辑
if (val == 'edit') {
// 编辑
openForm('update', row)
} else if (val == 'delete') { // 删除
} else if (val == 'delete') {
// 删除
handleDelete(row.id)
}
}
@ -361,9 +422,7 @@ const searchTableSuccess = (formField, searchField, val, formRef) => {
emit('searchTableSuccessDetail', formField, searchField, val, formRef)
}
// 传递给父类
const emit = defineEmits([
'searchTableSuccessDetail',
])
const emit = defineEmits(['searchTableSuccessDetail', 'changeTabs'])
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
@ -374,16 +433,33 @@ const handleDelete = async (id: number) => {
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch { }
} catch {}
}
// 筛选提交
const searchFormClick = (searchData) => {
tableObject.params = {
tableObjectRef.value.params = {
isSearch: true,
filters: searchData.filters?searchData.filters:[{column: "masterId", action: "==", value: masterParmas.value.masterId}]
filters: searchData.filters
? searchData.filters
: [{ column: 'masterId', action: '==', value: masterParmas.value.masterId }]
}
getList() // 刷新当前列表
}
//监视属性
watch(
() => props.apiPage,
() => {
const { tableObject, tableMethods } = useTable({
getListApi: props.apiPage // 分页接口
})
detailAllSchemasRef.value = props.detailAllSchemas
tableObjectRef.value = tableObject
tableMethodsRef.value = tableMethods
const { getList } = tableMethods
getList()
}
)
</script>
<style lang="scss">
.el-drawer__body {

Write Preview
Loading…
Cancel
Save