|
@@ -0,0 +1,168 @@
|
|
|
+<template>
|
|
|
+ <div class="table_item">
|
|
|
+ <s-table
|
|
|
+ ref="tableRef"
|
|
|
+ :columns="columns"
|
|
|
+ :data="loadData"
|
|
|
+ :row-key="(record) => record.id"
|
|
|
+ @resizeColumn="handleResizeColumn"
|
|
|
+ >
|
|
|
+ <template #operator>
|
|
|
+ <!-- 搜索区域 -->
|
|
|
+ <div class="table-search">
|
|
|
+ <div class="table-search-form">
|
|
|
+ <a-row :gutter="10">
|
|
|
+ <a-form
|
|
|
+ ref="searchFormRef"
|
|
|
+ name="advanced_search"
|
|
|
+ layout="inline"
|
|
|
+ :label-col="{ style: { width: '70px', justifyContent: 'end' } }"
|
|
|
+ :model="searchFormState"
|
|
|
+ class="ant-advanced-search-form"
|
|
|
+ >
|
|
|
+ <a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
|
|
|
+ ><a-form-item label="房间名称" name="name">
|
|
|
+ <a-input v-model:value="searchFormState.name" placeholder="请输入房间名称" /> </a-form-item
|
|
|
+ ></a-col>
|
|
|
+ </a-form>
|
|
|
+ </a-row>
|
|
|
+ </div>
|
|
|
+ <div class="table-search-buttons">
|
|
|
+ <a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
|
|
|
+ <a-button class="xn-mg08" @click="reset">重置</a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 其他操作区域 -->
|
|
|
+ <div class="table-head-btn">
|
|
|
+ <div class="btn-left">
|
|
|
+ <a-button type="primary" @click="formRef.onOpen()">
|
|
|
+ <template #icon><plus-outlined /></template>新增
|
|
|
+ </a-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <template #bodyCell="{ column, record, index }">
|
|
|
+ <!-- 序号 -->
|
|
|
+ <template v-if="column.dataIndex === 'index'">{{ index + 1 }} </template>
|
|
|
+ <template v-if="column.dataIndex === 'action'">
|
|
|
+ <a-button type="link" size="small" @click="formRef.onOpen(record)">编辑</a-button>
|
|
|
+ <a-popconfirm title="确定要删除吗?" @confirm="deleteData(record)">
|
|
|
+ <a-button type="link" danger size="small">删除</a-button>
|
|
|
+ </a-popconfirm>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </s-table>
|
|
|
+ <Form ref="formRef" @successful="tableRef.refresh(true)" />
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+ import targetRoomApi from '@/api/coldchain/targetRoomApi'
|
|
|
+ import Form from './form.vue'
|
|
|
+ const formRef = ref()
|
|
|
+
|
|
|
+ const searchFormRef = ref()
|
|
|
+ const searchFormState = ref({})
|
|
|
+ const tableRef = ref()
|
|
|
+ const columns = [
|
|
|
+ {
|
|
|
+ title: '序号',
|
|
|
+ dataIndex: 'index',
|
|
|
+ align: 'center',
|
|
|
+ width: 50
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '房间名称',
|
|
|
+ dataIndex: 'name',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ resizable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '所属组织',
|
|
|
+ dataIndex: 'createOrgName',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ resizable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '创建时间',
|
|
|
+ dataIndex: 'createTime',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ resizable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '排序',
|
|
|
+ dataIndex: 'sortCode',
|
|
|
+ align: 'center',
|
|
|
+ ellipsis: true,
|
|
|
+ resizable: true
|
|
|
+ },
|
|
|
+ {
|
|
|
+ title: '操作',
|
|
|
+ dataIndex: 'action',
|
|
|
+ align: 'center',
|
|
|
+ width: 200
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ // 可伸缩列
|
|
|
+ const handleResizeColumn = (w, col) => {
|
|
|
+ col.width = w
|
|
|
+ }
|
|
|
+
|
|
|
+ const loadData = (parameter) => {
|
|
|
+ return targetRoomApi.targetRoomPage(Object.assign(parameter, searchFormState.value)).then((res) => {
|
|
|
+ return res
|
|
|
+ })
|
|
|
+ }
|
|
|
+
|
|
|
+ // 重置
|
|
|
+ const reset = () => {
|
|
|
+ searchFormRef.value.resetFields()
|
|
|
+ tableRef.value.refresh(true)
|
|
|
+ }
|
|
|
+ // 删除
|
|
|
+ const deleteData = (record) => {
|
|
|
+ let params = [
|
|
|
+ {
|
|
|
+ id: record.id
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ targetRoomApi.targetRoomDelete(params).then(() => {
|
|
|
+ tableRef.value.refresh(true)
|
|
|
+ reset()
|
|
|
+ })
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="less" scoped>
|
|
|
+ .table_item {
|
|
|
+ padding: 15px 20px;
|
|
|
+ background-color: #ffffff;
|
|
|
+ :deep(.ant-table-pagination-right) {
|
|
|
+ justify-content: center !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list {
|
|
|
+ width: 60%;
|
|
|
+ padding: 20px 20px;
|
|
|
+ border-radius: 10px;
|
|
|
+
|
|
|
+ :deep(.ant-descriptions) {
|
|
|
+ width: 100%;
|
|
|
+ .ant-descriptions-row {
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .ant-descriptions-item-label {
|
|
|
+ width: 120px;
|
|
|
+ }
|
|
|
+ .ant-descriptions-item-content {
|
|
|
+ width: calc(100% - 120px);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</style>
|