ebike-ui/ebike-operate/src/views/Urban/SiteManage/index.vue

<template>
  <div>
    <a-card :bordered="false">
      <a-form
        :label-col="{ xl: 7, lg: 5, md: 7, sm: 4 }"
        :wrapper-col="{ xl: 17, lg: 19, md: 17, sm: 20 }"
      >
        <a-row :gutter="8">
          <a-col
            :xl="6"
            :lg="12"
            :md="12"
            :sm="24"
            :xs="24"
          >
            <a-form-item label="站点类型">
              <a-select
                v-model:value="queryform.type"
                placeholder="请选择站点类型"
                allow-clear
              >
                <a-select-option value="2">停车站点</a-select-option>
                <a-select-option value="5">禁停区</a-select-option>
                <a-select-option value="6">禁行区</a-select-option>
                <a-select-option value="7">扣车区</a-select-option>
                <a-select-option value="8">接客站点</a-select-option>
                <a-select-option value="3">仓管区</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col
            :xl="6"
            :lg="12"
            :md="12"
            :sm="24"
            :xs="24"
          >
            <a-form-item label="站点级别">
              <a-select
                v-model:value="queryform.level"
                placeholder="请选择站点级别"
                allow-clear
              >
                <a-select-option value="1">1级</a-select-option>
                <a-select-option value="2">2级</a-select-option>
                <a-select-option value="3">3级</a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col
            :xl="6"
            :lg="12"
            :md="12"
            :sm="24"
            :xs="24"
          >
            <a-form-item label="站点名称">
              <a-input
                v-model:value.trim="queryform.name"
                placeholder="请输入站点名称"
                allow-clear
              ></a-input>
            </a-form-item>
          </a-col>
          <a-col
            :xl="6"
            :lg="12"
            :md="12"
            :sm="24"
            :xs="24"
          >
            <a-form-item
              class="ele-text-right"
              :wrapper-col="{ span: 24 }"
            >
              <a-space>
                <a-button
                  type="primary"
                  style="background-color: #5cc750"
                  @click="search"
                >查询</a-button>
                <!-- <a-button>重置</a-button> -->
              </a-space>
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>
      <!-- 数据操作 -->
      <a-space style="margin-bottom: 10px">
        <a-button
          style="background-color: #5cc750"
          type="primary"
          class="ele-btn-icon"
          @click="handleAdd"
        >
          <template #icon>
            <plus-outlined />
          </template>
          <span>新增</span>
        </a-button>
      </a-space>
      <!-- 表格 -->
      <a-table
        :pagination="pagination"
        @change="handleTableChange"
        bordered
        :columns="columns"
        :dataSource="dataSource"
        :scroll="{ x: 'max-content' }"
      >
        <template #headerCell="{ column }">
          <template v-if="column.key === 'action'">
            <SettingOutlined style="margin-right: 5px" />{{ column.title }}
          </template>
        </template>
        <template #bodyCell="{ column, record }">
          <template v-if="column.key === 'action'">
            <a-space>
              <a>详情</a>
              <a-divider type="vertical" />
              <a>编辑</a>
              <a-divider type="vertical" />
              <a>申请删除</a>
            </a-space>
          </template>
        </template>
      </a-table>
    </a-card>
    <!-- 地图 -->
    <operateRegionMap
      ref="editORMapModel"
      :onCallBack="onORMapCallBack"
      :openTitle="openORMapTitle"
    ></operateRegionMap>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive, nextTick } from 'vue'
import { callOperate } from '@/apis/call.js'
import { message } from 'ant-design-vue'
import config from '@/utils/config.js'
import operateRegionMap from '../OperateRegionMap/index.vue'
import {
  SettingOutlined
} from '@ant-design/icons-vue'
import { useRouter, useRoute } from 'vue-router'

// 表格行数据
const dataSource = ref([])
const data = ref([])
const router = useRouter()
const editORMapModel = ref(null);
const openORMapTitle = ref('地图');
// 查询相关
const queryform = ref({
  type: '',
  level: '',
  name: '',
  pageParam: {
    pageNum: config.pageParam.pageNum,
    pageSize: config.pageParam.pageSize
  }
})

//对于每页数据的管理
let pagination = reactive({
  total: dataSource.value.length,
  current: queryform.value.pageParam.pageNum,
  pageSize: queryform.value.pageParam.pageSize,
  showSizeChanger: true,
  pageSizeOptions: config.pageParam.pageSizeOptions,
  showQuickJumper: true
})

// 表格列配置
const columns = ref([
  {
    title: '序号',
    key: 'index',
    width: 80,
    align: 'center',
    dataIndex: 'index'
  },
  {
    key: 'typeName',
    title: '站点类型',
    width: 200,
    align: 'center',
    dataIndex: 'typeName'
  },
  {
    key: 'regionName',
    title: '运营区域',
    width: 150,
    align: 'center',
    dataIndex: 'regionName'
  },
  {
    key: 'simpleName',
    title: '区域简称',
    width: 150,
    align: 'center',
    dataIndex: 'simpleName'
  },
  {
    key: 'inOperation',
    title: '运营状态',
    width: 150,
    align: 'center',
    dataIndex: 'inOperation'
  },
  {
    key: 'regionRank',
    title: '区域级别',
    width: 150,
    align: 'center',
    dataIndex: 'regionRank'
  },
  {
    key: 'regionCode',
    title: '区域编码',
    width: 150,
    align: 'center',
    dataIndex: 'regionCode'
  },
  {
    key: 'siteCount',
    title: '站点数量',
    width: 150,
    align: 'center',
    dataIndex: 'siteCount'
  },
  {
    key: 'freeDuration',
    title: '免费时长',
    width: 150,
    align: 'center',
    dataIndex: 'freeDuration'
  },
  {
    key: 'billingStandard',
    title: '计费标准',
    width: 200,
    align: 'center',
    dataIndex: 'billingStandard'
  },
  {
    key: 'dispatchFee',
    title: '运调度费(元)',
    width: 250,
    align: 'center',
    dataIndex: 'dispatchFee'
  },
  {
    key: 'cappedAmount',
    title: '封顶金额(元)',
    width: 150,
    align: 'center',
    dataIndex: 'cappedAmount'
  },
  {
    key: 'createdAt',
    title: '创建时间',
    width: 150,
    align: 'center',
    dataIndex: 'createdAt'
  },
  {
    title: '操作',
    key: 'action',
    width: 300,
    align: 'center',
    fixed: 'right',
  }
])

//获取用户列表数据并格式化字段
onMounted(async () => {
  getData();
})

const getData = async () => {
  let url = "/ebikeRegion/pageOperation?pageNum=" + queryform.value.pageParam.pageNum + "&pageSize=" + queryform.value.pageParam.pageSize
  if (queryform.value.regionName) {
    url += "&regionName=" + queryform.value.regionName
  }
  if (queryform.value.simpleName) {
    url += "&simpleName=" + queryform.value.simpleName
  }
  if (queryform.value.inOperation) {
    url += "&inOperation=" + queryform.value.inOperation
  }
  const res = await callOperate(url, {}, "get");
  if (res.code != 200) {
    message.error(res.message)
    return
  }
  data.value = res.data.records
  data.value = data.value.map((item, index) => {
    index++
    return { ...item, index }
  })
  dataSource.value = data.value
  pagination.total = res.data.totalRow
}


// 对每页数据显示的交互
let handleTableChange = (pagina) => {
  pagination.current = pagina.current
  pagination.pageSize = pagina.pageSize
  queryform.value.pageParam.pageNum = pagina.current
  queryform.value.pageParam.pageSize = pagina.pageSize
  getData()
}

const search = () => {
  getData()
}

const handleEditORMap = (record) => {
  openORMapTitle.value = '绘制地图（' + record['regionName'] + '）';
  const data = {
    regionId: record['regionId']
  }
  editORMapModel.value.showModal(data);
}

const onORMapCallBack = () => {

}

const handleAdd = () => {
  router.push('/Urban/OperateRegionAdd');
}

</script>