table.vue 12 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313
  1. <template>
  2. <div class="card-search">
  3. <a-form
  4. ref="formRef"
  5. name="advanced_search"
  6. class="ant-advanced-search-form"
  7. :model="formState"
  8. @finish="onFinish"
  9. >
  10. <a-row :gutter="24">
  11. <a-col :span="6">
  12. <a-form-item
  13. name="tempName"
  14. label="模板名称"
  15. :label-col="{span:6}">
  16. <a-input v-model:value="formState.tempName" style="width: 200px"></a-input>
  17. </a-form-item>
  18. </a-col>
  19. <a-col :span="6">
  20. <a-form-item
  21. name="tempNo"
  22. label="模板编号"
  23. :label-col="{span:6}">
  24. <a-input v-model:value="formState.tempNo" style="width: 200px"></a-input>
  25. </a-form-item>
  26. </a-col>
  27. <a-col :span="6">
  28. <a-form-item
  29. name="tempNo"
  30. label="创建日期"
  31. :label-col="{span:6}">
  32. <a-range-picker format="YYYY-MM-DD" :placeholder="['开始日期', '结束日期']" @change="onRangeChange"/>
  33. </a-form-item>
  34. </a-col>
  35. <a-col :span="6" style="text-align: left">
  36. <a-button type="primary" html-type="submit" @click="onFinish">查询</a-button>
  37. <a-button style="margin: 0 8px" @click="() => {formRef.resetFields();loadData()}">重置</a-button>
  38. </a-col>
  39. </a-row>
  40. <a-row class="edit-operation">
  41. <a-col :span="24" style="text-align: right">
  42. <a-radio-group v-model:value="viewModel" style="text-align: left">
  43. <a-radio-button value="list">
  44. <UnorderedListOutlined/>
  45. 列表
  46. </a-radio-button>
  47. <a-radio-button value="card">
  48. <TableOutlined/>
  49. 卡片
  50. </a-radio-button>
  51. </a-radio-group>
  52. <a-button type="primary" html-type="button" @click="add">
  53. <template #icon>
  54. <PlusOutlined/>
  55. </template>
  56. 添加搜索模板
  57. </a-button>
  58. <a-popconfirm placement="leftTop"
  59. title="是否删除模板?"
  60. @confirm="onDelete()">
  61. <a-button type="primary" style="margin: 0 8px" html-type="button">删除</a-button>
  62. </a-popconfirm>
  63. </a-col>
  64. </a-row>
  65. </a-form>
  66. <div class="search-result-list" v-if="viewModel=='card'">
  67. <a-spin :spinning="loading">
  68. <a-row :gutter="[24,8]">
  69. <a-col :span="6" v-for="item in data">
  70. <a-card :title="item.tempName">
  71. <template #extra>
  72. <a-button type="link" @click="edit(item.tempId)">查看详情</a-button>
  73. </template>
  74. <template class="ant-card-actions" #actions>
  75. <FormOutlined key="edit" @click="edit(item.tempId)" title="编辑"/>
  76. <a-popconfirm placement="leftTop"
  77. title="是否删除数据?"
  78. @confirm="deleteSingle(item.tempId)">
  79. <DeleteOutlined key="ellipsis" title="删除"/>
  80. </a-popconfirm>
  81. <CloudDownloadOutlined key="edit" @click="down(item.tempId)" title="申请下载"/>
  82. <CopyOutlined key="copy" @click="copy(item.tempId)" title="拷贝"/>
  83. </template>
  84. <a-popover title="详细信息" :visible="item.visible">
  85. <template #content>
  86. <p class="tip-detail">维度:{{ item.dimensionName }}</p>
  87. <p class="tip-detail">度量:{{ item.measurName }}</p>
  88. </template>
  89. </a-popover>
  90. <a-row :gutter="[24,4]">
  91. <a-col :span="10" class="col-text">模板编号:</a-col>
  92. <a-col :span="12" class="col-content">{{ item.tempNo }}</a-col>
  93. <a-col :span="10" class="col-text">维度:</a-col>
  94. <a-col :span="12" class="col-content" @mouseover="item.visible=true" @mouseout="item.visible=false">{{ item.dimensionName }}</a-col>
  95. <a-col :span="10" class="col-text">度量:</a-col>
  96. <a-col :span="12" class="col-content" @mouseover="item.visible=true" @mouseout="item.visible=false">{{ item.measurName }}</a-col>
  97. <a-col :span="10" class="col-text">创建人:</a-col>
  98. <a-col :span="12">{{ item.createdName }}</a-col>
  99. <a-col :span="10" class="col-text">创建/更新日期:</a-col>
  100. <a-col :span="12">{{ dayjs(item.createTime ?? item.modifyTime).format('YYYY-MM-DD') }}</a-col>
  101. <a-col :span="10" class="col-text">备注:</a-col>
  102. <a-col :span="12" class="col-content">{{ item.remark }}</a-col>
  103. </a-row>
  104. </a-card>
  105. </a-col>
  106. </a-row>
  107. </a-spin>
  108. </div>
  109. <div class="search-result-list" v-else="viewModel=='list'">
  110. <a-table :columns="columns" :data-source="data" :scroll="{ x:'100%', y: 500 }"
  111. :loading="loading"
  112. :pagination="false"
  113. :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange}"
  114. :row-key="record=>record.tempId"
  115. bordered>
  116. <template #bodyCell="{ column,record }">
  117. <template v-if="column.key === 'operation'">
  118. <a-button type="link" size="small" @click="edit(record.tempId)">编辑</a-button>
  119. <a-button type="link" size="small" @click="down(record.tempId)">申请下载</a-button>
  120. <a-popover trigger="hover" placement="left">
  121. <template #content>
  122. <a-button type="link" size="small" @click="copy(record.tempId)">复制模板</a-button><br/>
  123. <a-button type="link" size="small" @click="edit(record.tempId)">查看详情</a-button><br/>
  124. <a-popconfirm placement="leftTop"
  125. title="是否删除数据?"
  126. @confirm="deleteSingle(record.tempId)">
  127. <a-button type="link" size="small">删除</a-button>
  128. </a-popconfirm>
  129. </template>
  130. <a-button type="link" size="small">更多</a-button>
  131. </a-popover>
  132. </template>
  133. </template>
  134. </a-table>
  135. </div>
  136. <a-pagination :page-size-options="['5', '20', '30', '40', '50']" show-size-changer
  137. v-model:current="pagination.current" :total="pagination.total" style="float: right;margin-top: 10px;"
  138. :pageSize="pagination.pageSize" :show-total="total => `共 ${total} 条`"
  139. @change="(current)=>handleTableChange({ current: current,pageSize: pagination.pageSize })"
  140. @showSizeChange="(current,pageSize)=>handleTableChange({ current: current,pageSize: pageSize })"/>
  141. <Apply @ok="applyOk" v-model:options="applyOptions"></Apply>
  142. </div>
  143. </template>
  144. <script lang="ts">
  145. import {reactive, ref, defineComponent, computed} from 'vue';
  146. import type {FormInstance} from 'ant-design-vue';
  147. import type {TableColumnsType, TableProps} from 'ant-design-vue';
  148. import {get, postdel} from '@/api/common';
  149. import {useRoute, useRouter} from "vue-router";
  150. import {useTabsViewStore} from "@/store/modules/tabsView";
  151. import {message} from "ant-design-vue";
  152. import {getPaginationTotalTitle} from "@/utils/common";
  153. import dayjs from "dayjs";
  154. import Apply from '@/components/basic/approve/Apply.vue'
  155. export default defineComponent({
  156. name: 'tempList',
  157. components: {Apply},
  158. setup() {
  159. const route = useRoute();
  160. const router = useRouter();
  161. const expand = ref(false);
  162. const formRef = ref<FormInstance>();
  163. const tabsViewStore = useTabsViewStore();
  164. const selectedRowKeys = ref([]);
  165. const viewModel = ref("card");
  166. const formState = reactive({
  167. page: 1, rows: 10, tempName: '', tempNo: '', tempId: "", beiginDate: '', endDate: '', total: 0, isPostManage: true
  168. });
  169. const applyOptions = ref({visible: false, tempId: ""});
  170. const columns: TableColumnsType = [
  171. {
  172. title: '序号',
  173. width: 60,
  174. dataIndex: 'index',
  175. key: 'index',
  176. align: "center",
  177. customRender: item => `${formState.rows * (formState.page - 1) + item.index + 1}`
  178. },
  179. {title: '模板编号', dataIndex: 'tempNo', key: 'tempNo', width: 180, align: "center"},
  180. {title: '模板名称', dataIndex: 'tempName', key: '1', width: 300},
  181. {
  182. title: '创建时间', dataIndex: 'createTime', key: '2', width: 180, customRender: ({record}) =>
  183. record.createTime == null ? "" : (dayjs(record.createTime).format('YYYY-MM-DD HH:mm'))
  184. },
  185. {
  186. title: '模板状态', dataIndex: 'status', key: '3', width: 100, align: "center", customRender: ({record}) =>
  187. record.status == 0 ? "正常" : "禁用"
  188. },
  189. {title: '备注', dataIndex: 'remark', key: '4', ellipsis: true},
  190. {title: '操作', key: 'operation', width: 180, align: "center"},
  191. ];
  192. const data = ref([]);
  193. const pagination = computed(() => ({
  194. total: formState.total,
  195. current: formState.page,
  196. pageSize: formState.rows,
  197. showSizeChanger: true,
  198. showTotal: total => getPaginationTotalTitle(total)
  199. }));
  200. const loading = ref(false);
  201. const handleTableChange: TableProps['onChange'] = (
  202. pag: { pageSize: number; current: number },
  203. ) => {
  204. formState.page = pag.current;
  205. formState.rows = pag.pageSize;
  206. loadData();
  207. };
  208. const onFinish = () => {
  209. loadData();
  210. }
  211. const onRangeChange = (dateString) => {
  212. formState.beiginDate = dateString ? dateString[0].format("YYYY-MM-DD") : '';
  213. formState.endDate = dateString ? dateString[1].format("YYYY-MM-DD") : '';
  214. loadData();
  215. };
  216. const loadData = async function () {
  217. loading.value = true;
  218. const result: any = await get('temp/getList', formState);
  219. data.value = result.list;
  220. formState.total = result.total;
  221. loading.value = false;
  222. }
  223. const onDelete = () => {
  224. if (selectedRowKeys.value.length <= 0) {
  225. message.warning('请选择需要删除的数据!');
  226. return false;
  227. }
  228. postdel('temp/deletes', selectedRowKeys.value).then(() => {
  229. loadData();
  230. })
  231. };
  232. const deleteSingle = (id: string) => {
  233. postdel('temp/deletes', [id]).then(() => {
  234. loadData();
  235. })
  236. }
  237. const add = () => {
  238. tabsViewStore.addTabByPath('/query/index', {});
  239. };
  240. const edit = (key: string) => {
  241. tabsViewStore.addTabByPath('/query/index', {tempId: key});
  242. };
  243. const copy = (key: string) => {
  244. tabsViewStore.addTabByPath('/query/index', {tempId: key,iscopy:1});
  245. };
  246. const onSelectChange = (keys: any) => {
  247. selectedRowKeys.value = keys;
  248. };
  249. const down = (tempId) => {
  250. applyOptions.value.tempId = tempId;
  251. applyOptions.value.visible = true;
  252. }
  253. const applyOk = (args) => {
  254. console.log(args);
  255. }
  256. return {
  257. router,
  258. route,
  259. expand,
  260. formRef, onRangeChange,
  261. formState, viewModel, dayjs,
  262. columns, data, loading, selectedRowKeys,
  263. pagination, down, applyOptions, applyOk,
  264. handleTableChange,
  265. onSelectChange,
  266. onFinish,
  267. loadData,
  268. add, deleteSingle,
  269. edit,copy, onDelete
  270. };
  271. },
  272. created() {
  273. this.loadData();
  274. },
  275. activated() {
  276. if (history.state.params?.reload)
  277. this.loadData();
  278. }
  279. });
  280. </script>
  281. <style lang="less" scoped>
  282. .ant-card-actions {
  283. margin: 0;
  284. padding: 0;
  285. list-style: none;
  286. background: #fafafa;
  287. border-top: 1px solid #f0f0f0;
  288. }
  289. .tip-detail{
  290. flex-wrap: wrap;
  291. max-width: 500px;
  292. }
  293. .col-text {
  294. padding-right: 0px !important;
  295. text-align: right;
  296. font-weight: bold;
  297. }
  298. .col-content {
  299. width: 200px;
  300. overflow: hidden;
  301. text-overflow: ellipsis;
  302. white-space: nowrap;
  303. }
  304. </style>