|
@@ -24,23 +24,63 @@
|
|
|
<a-input v-model:value="formState.tempNo" style="width: 200px"></a-input>
|
|
|
</a-form-item>
|
|
|
</a-col>
|
|
|
- <a-col :span="6" style="text-align: left">
|
|
|
+ <a-col :span="6" style="text-align: left">
|
|
|
<a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
|
|
|
<a-button style="margin: 0 8px" @click="() => {formRef.resetFields();loadData()}">重置</a-button>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
<a-row class="edit-operation">
|
|
|
<a-col :span="24" style="text-align: right">
|
|
|
+ <a-radio-group v-model:value="viewModel" style="text-align: left">
|
|
|
+ <a-radio-button value="list">列表</a-radio-button>
|
|
|
+ <a-radio-button value="card">卡片</a-radio-button>
|
|
|
+ </a-radio-group>
|
|
|
<a-button type="primary" html-type="button" @click="add" functioncode="T010601">新增</a-button>
|
|
|
<a-popconfirm placement="leftTop"
|
|
|
- title="是否删除模板数据?"
|
|
|
- @confirm="onDelete()">
|
|
|
+ title="是否删除模板数据?"
|
|
|
+ @confirm="onDelete()">
|
|
|
<a-button type="primary" style="margin: 0 8px" html-type="button" functioncode="T010604">删除</a-button>
|
|
|
</a-popconfirm>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
- <div class="search-result-list">
|
|
|
+ <div class="search-result-list" v-if="viewModel=='card'">
|
|
|
+ <a-row :gutter="[24,8]">
|
|
|
+ <a-col :span="6" v-for="item in data">
|
|
|
+
|
|
|
+ <a-card :title="item.tempName" @mouseover="item.visible=true" @mouseout="item.visible=false">
|
|
|
+ <template #extra>
|
|
|
+ <a href="#">查看详情</a>
|
|
|
+ </template>
|
|
|
+ <template class="ant-card-actions" #actions>
|
|
|
+ <edit-outlined key="edit"/>
|
|
|
+ <ellipsis-outlined key="ellipsis"/>
|
|
|
+ </template>
|
|
|
+ <a-popover title="详细信息" :visible="item.visible">
|
|
|
+ <template #content>
|
|
|
+ <p>维度:{{ item.dimensionName }}</p>
|
|
|
+ <p>度量:{{ item.measurName }}</p>
|
|
|
+ </template>
|
|
|
+ </a-popover>
|
|
|
+ <a-row :gutter="[24,4]" >
|
|
|
+ <a-col :span="10" class="col-text">维度:</a-col>
|
|
|
+ <a-col :span="12" class="col-content" >{{ item.dimensionName }}</a-col>
|
|
|
+ <a-col :span="10" class="col-text">度量:</a-col>
|
|
|
+ <a-col :span="12" class="col-content" >{{ item.measurName }}</a-col>
|
|
|
+ <a-col :span="10" class="col-text">创建人:</a-col>
|
|
|
+ <a-col :span="12">{{ item.createdName }}</a-col>
|
|
|
+ <a-col :span="10" class="col-text">创建/更新日期:</a-col>
|
|
|
+ <a-col :span="12">{{ dayjs(item.createTime ?? item.modifyTime).format('YYYY-MM-DD') }}</a-col>
|
|
|
+ <a-col :span="10" class="col-text">备注:</a-col>
|
|
|
+ <a-col :span="12" class="col-content">{{ item.remark }}</a-col>
|
|
|
+ </a-row>
|
|
|
+ </a-card>
|
|
|
+ </a-col>
|
|
|
+ </a-row>
|
|
|
+ <a-pagination v-model:current="pagination.current" :total="pagination.total"
|
|
|
+ :pageSize="pagination.pageSize" :show-total="total => `共 ${total} 条`"/>
|
|
|
+ </div>
|
|
|
+ <div class="search-result-list" v-if="viewModel=='list'">
|
|
|
<a-table :columns="columns" :data-source="data" :scroll="{ x:'100%', y: 500 }" :pagination="pagination"
|
|
|
:loading="loading"
|
|
|
:row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
|
|
@@ -60,7 +100,7 @@
|
|
|
import {reactive, ref, defineComponent, computed} from 'vue';
|
|
|
import type {FormInstance} from 'ant-design-vue';
|
|
|
import type {TableColumnsType, TableProps} from 'ant-design-vue';
|
|
|
-import { get, postdel} from '@/api/common';
|
|
|
+import {get, postdel} from '@/api/common';
|
|
|
import {useRoute, useRouter} from "vue-router";
|
|
|
import {useTabsViewStore} from "@/store/modules/tabsView";
|
|
|
import {message} from "ant-design-vue";
|
|
@@ -77,11 +117,11 @@ export default defineComponent({
|
|
|
const expand = ref(false);
|
|
|
const formRef = ref<FormInstance>();
|
|
|
const tabsViewStore = useTabsViewStore();
|
|
|
- const selectedRowKeys =ref([]) ;
|
|
|
+ const selectedRowKeys = ref([]);
|
|
|
+ const viewModel = ref("list");
|
|
|
const formState = reactive({
|
|
|
- page: 1, rows: 10, tempName: '', tempNo: '', tempId: "", total: 0,isPostManage:true
|
|
|
+ page: 1, rows: 10, tempName: '', tempNo: '', tempId: "", total: 0, isPostManage: true
|
|
|
});
|
|
|
-
|
|
|
const columns: TableColumnsType = [
|
|
|
{
|
|
|
title: '序号',
|
|
@@ -91,13 +131,17 @@ export default defineComponent({
|
|
|
align: "center",
|
|
|
customRender: item => `${formState.rows * (formState.page - 1) + item.index + 1}`
|
|
|
},
|
|
|
- {title: '模板编号', dataIndex: 'tempNo', key: 'tempNo', width:180,align:"center"},
|
|
|
- {title: '模板名称', dataIndex: 'tempName', key: '1', width:300},
|
|
|
- {title: '创建时间', dataIndex: 'createTime', key: '2', width: 180, customRender: ({record}) =>
|
|
|
- record.createTime==null?"": (dayjs(record.createTime).format('YYYY-MM-DD HH:mm'))},
|
|
|
- {title: '模板状态', dataIndex: 'status', key: '3', width: 100,align:"center", customRender: ({record}) =>
|
|
|
- record.status==0?"正常":"禁用"},
|
|
|
- {title: '备注', dataIndex: 'remark', key: '4',ellipsis: true},
|
|
|
+ {title: '模板编号', dataIndex: 'tempNo', key: 'tempNo', width: 180, align: "center"},
|
|
|
+ {title: '模板名称', dataIndex: 'tempName', key: '1', width: 300},
|
|
|
+ {
|
|
|
+ title: '创建时间', dataIndex: 'createTime', key: '2', width: 180, customRender: ({record}) =>
|
|
|
+ record.createTime == null ? "" : (dayjs(record.createTime).format('YYYY-MM-DD HH:mm'))
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '模板状态', dataIndex: 'status', key: '3', width: 100, align: "center", customRender: ({record}) =>
|
|
|
+ record.status == 0 ? "正常" : "禁用"
|
|
|
+ },
|
|
|
+ {title: '备注', dataIndex: 'remark', key: '4', ellipsis: true},
|
|
|
{title: '操作', key: 'operation', width: 120, align: "center"},
|
|
|
];
|
|
|
|
|
@@ -154,15 +198,15 @@ export default defineComponent({
|
|
|
route,
|
|
|
expand,
|
|
|
formRef,
|
|
|
- formState,
|
|
|
- columns,data,loading,selectedRowKeys,
|
|
|
+ formState, viewModel, dayjs,
|
|
|
+ columns, data, loading, selectedRowKeys,
|
|
|
pagination,
|
|
|
handleTableChange,
|
|
|
onSelectChange,
|
|
|
onFinish,
|
|
|
loadData,
|
|
|
add,
|
|
|
- edit,onDelete
|
|
|
+ edit, onDelete
|
|
|
};
|
|
|
},
|
|
|
created() {
|
|
@@ -174,3 +218,25 @@ export default defineComponent({
|
|
|
}
|
|
|
});
|
|
|
</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.ant-card-actions {
|
|
|
+ margin: 0;
|
|
|
+ padding: 0;
|
|
|
+ list-style: none;
|
|
|
+ background: #fafafa;
|
|
|
+ border-top: 1px solid #f0f0f0;
|
|
|
+}
|
|
|
+
|
|
|
+.col-text {
|
|
|
+ padding-right: 0px !important;
|
|
|
+ text-align: right;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.col-content {
|
|
|
+ width: 200px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+}
|
|
|
+</style>
|