as-partner-frontend/src/views/modules/manage/store.vue

<template>
  <div class="mod-store">
    <el-form :inline="true" :model="dataForm" @keyup.enter="getDataList()">
      <el-form-item>
        <el-input v-model="dataForm.name" placeholder="门店名称" clearable></el-input>
      </el-form-item>
      <el-form-item>
        <el-button @click="getDataList()">查询</el-button>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="addHandle()">新增</el-button>
      </el-form-item>
    </el-form>
    <div class="table-page-wrap">
      <el-table
        :data="dataList"
        border
        v-loading="dataListLoading"
        style="width: 100%;">
        <el-table-column
          type="index"
          header-align="center"
          align="center"
          width="80"
          label="序号">
        </el-table-column>
        <el-table-column
          prop="name"
          header-align="center"
          align="center"
          label="门店名称">
        </el-table-column>
        <el-table-column
          prop="orgCode"
          header-align="center"
          align="center"
          label="编码">
        </el-table-column>
        <el-table-column
          prop="parentOrgName"
          header-align="center"
          align="center"
          label="所属上级">
        </el-table-column>
        <el-table-column
          prop="status"
          header-align="center"
          align="center"
          label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 'ACTIVE'" size="small" type="success">启用</el-tag>
            <el-tag v-else-if="scope.row.status === 'INACTIVE'" size="small" type="danger">禁用</el-tag>
            <el-tag v-else size="small">{{ scope.row.status }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="createdAt"
          header-align="center"
          align="center"
          width="180"
          label="创建时间">
          <template #default="scope">
            {{ scope.row.createdAt || '' }}
          </template>
        </el-table-column>
        <el-table-column
          fixed="right"
          header-align="center"
          align="center"
          width="150"
          label="操作">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="addOrUpdateHandle(scope.row)">修改</el-button>
            <el-button link type="danger" size="small" @click="deleteHandle(scope.row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        @size-change="sizeChangeHandle"
        @current-change="currentChangeHandle"
        :current-page="pageIndex"
        :page-sizes="[10, 20, 50, 100]"
        :page-size="pageSize"
        :total="totalPage"
        layout="total, sizes, prev, pager, next, jumper">
      </el-pagination>
    </div>
    <!-- 弹窗, 新增 / 修改 -->
    <el-dialog v-model="addOrUpdateVisible" :title="addOrUpdateTitle" width="500px">
      <el-form :model="addOrUpdateForm" :rules="addOrUpdateRules" ref="addOrUpdateFormRef" label-width="100px">
        <el-form-item label="上级组织" prop="parentId">
          <org-tree-select v-model="addOrUpdateForm.parentId" placeholder="请选择上级组织" :hide-node-types="['PLATFORM', 'STORE']" />
        </el-form-item>
        <el-form-item label="门店名称" prop="name">
          <el-input v-model="addOrUpdateForm.name" placeholder="门店名称"></el-input>
        </el-form-item>
        <el-form-item label="编码" prop="orgCode">
          <el-input v-model="addOrUpdateForm.orgCode" placeholder="编码"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <el-button @click="addOrUpdateVisible = false">取消</el-button>
        <el-button type="primary" @click="submitForm()">确定</el-button>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { reactive, ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox, type FormInstance, type FormRules } from 'element-plus'
import { getStoreList, saveOrUpdateStore, deleteStore, type StoreInfo } from '@/api/manage/store'

interface DataForm {
  name: string
}

const dataForm = reactive<DataForm>({
  name: ''
})
const dataList = ref<StoreInfo[]>([])
const pageIndex = ref<number>(1)
const pageSize = ref<number>(10)
const totalPage = ref<number>(0)
const dataListLoading = ref<boolean>(false)

const addOrUpdateVisible = ref<boolean>(false)
const addOrUpdateTitle = ref<string>('')
const addOrUpdateFormRef = ref<FormInstance>()

interface AddOrUpdateForm {
  id?: number
  parentId: number | null
  name: string
  orgCode: string
}

const addOrUpdateForm = reactive<AddOrUpdateForm>({
  parentId: null,
  name: '',
  orgCode: ''
})

const addOrUpdateRules: FormRules = {
  parentId: [{ required: true, message: '请选择上级组织', trigger: 'change' }],
  name: [{ required: true, message: '请输入门店名称', trigger: 'blur' }]
}

async function getDataList (): Promise<void> {
  dataListLoading.value = true
  try {
    const res = await getStoreList({
      page: pageIndex.value,
      limit: pageSize.value,
      name: dataForm.name
    })
    if (res && res.code === 0) {
      dataList.value = res.data?.page?.list || []
      totalPage.value = res.data?.page?.totalCount || 0
    } else {
      dataList.value = []
      totalPage.value = 0
    }
  } finally {
    dataListLoading.value = false
  }
}

function sizeChangeHandle (val: number): void {
  pageSize.value = val
  pageIndex.value = 1
  getDataList()
}

function currentChangeHandle (val: number): void {
  pageIndex.value = val
  getDataList()
}

function resetForm (): void {
  addOrUpdateForm.id = undefined
  addOrUpdateForm.parentId = null
  addOrUpdateForm.name = ''
  addOrUpdateForm.orgCode = ''
  addOrUpdateFormRef.value?.clearValidate()
}

function addHandle (): void {
  resetForm()
  addOrUpdateTitle.value = '新增门店'
  addOrUpdateVisible.value = true
}

function addOrUpdateHandle (row: StoreInfo): void {
  resetForm()
  addOrUpdateTitle.value = '修改门店'
  addOrUpdateForm.id = row.id
  addOrUpdateForm.parentId = row.parentId
  addOrUpdateForm.name = row.name
  addOrUpdateForm.orgCode = row.orgCode || ''
  addOrUpdateVisible.value = true
}

async function submitForm (): Promise<void> {
  if (!addOrUpdateFormRef.value) return
  await addOrUpdateFormRef.value.validate(async (valid) => {
    if (!valid) return
    const res = await saveOrUpdateStore({
      id: addOrUpdateForm.id,
      parentId: addOrUpdateForm.parentId ?? 0,
      name: addOrUpdateForm.name,
      orgCode: addOrUpdateForm.orgCode
    })
    if (res && res.code === 0) {
      ElMessage.success({
        message: '操作成功',
        duration: 1500,
        onClose: () => {
          addOrUpdateVisible.value = false
          getDataList()
        }
      })
    } else {
      ElMessage.error(res?.msg || '操作失败')
    }
  })
}

function deleteHandle (id: number): void {
  ElMessageBox.confirm(`确定对[id=${id}]进行[删除]操作?`, '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    deleteStore([id]).then((data) => {
      if (data && data.code === 0) {
        ElMessage.success({
          message: '操作成功',
          duration: 1500,
          onClose: () => {
            getDataList()
          }
        })
      } else {
        ElMessage.error(data?.msg || '操作失败')
      }
    })
  }).catch(() => {})
}

onMounted(() => {
  getDataList()
})
</script>

<style scoped>
.mod-store {
  padding: 10px;
}
</style>