init: 橘视厅酒店版会员系统前端

src/views/modules/manage/store.vue

@@ -0,0 +1,260 @@
+<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>