新增进件管理

src/views/applyments/components/selectShopsDialog.vue

@@ -0,0 +1,162 @@
+<template>
+  <el-dialog title="请选择用户" width="1000px" v-model="visible">
+    <div class="content">
+      <el-form :model="queryForm" inline>
+        <!-- <el-form-item>
+          <el-input v-model="queryForm.no" placeholder="请输入商户号" />
+        </el-form-item> -->
+        <el-form-item>
+          <el-input v-model="queryForm.shopName" placeholder="请输入商户名称" />
+        </el-form-item>
+        <el-form-item>
+          <el-button type="primary" icon="Search" :loading="tableData.loading" @click="searchHandle">查询</el-button>
+          <el-button icon="Refresh" :loading="tableData.loading" @click="resetHandle">重置</el-button>
+        </el-form-item>
+      </el-form>
+      <el-table :data="tableData.list" v-loading="tableData.loading" stripe border
+        style="width: 100%; margin-top: 20px;">
+        <el-table-column label="商户名称" prop="shopName"></el-table-column>
+        <el-table-column label="联系人姓名" prop="contactName"></el-table-column>
+        <el-table-column label="联系人电话" prop="phone"></el-table-column>
+        <el-table-column label="店铺类型" prop="shopType" width="100">
+          <template #default="scope">
+            <el-tag :type="typeFilter(scope.row.shopType).type">{{ typeFilter(scope.row.shopType).label }}</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="100">
+          <template #default="scope">
+            <el-button type="primary" @click="selectHandle(scope.row)">选择</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <div class="row mt14">
+        <el-pagination v-model:current-page="tableData.page" v-model:page-size="tableData.size"
+          :page-sizes="[10, 30, 50, 100]" background layout="total, sizes, prev, pager, next, jumper"
+          :total="tableData.total" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
+      </div>
+    </div>
+    <!-- <template #footer>
+      <div class="dialog-footer">
+        <el-button @click="visible = false">取消</el-button>
+        <el-button type="primary" @click="">确定</el-button>
+      </div>
+    </template> -->
+  </el-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import ShopApi from "@/api/account/shop";
+
+// 店铺类型过滤器
+type TagType = 'primary' | 'success' | 'danger' | 'info' | 'warning';
+function typeFilter(shopType: string): { value: string; label: string; type: TagType } {
+  const typs: Array<{ value: string; label: string; type: TagType }> = [
+    {
+      value: 'only',
+      label: '单店',
+      type: 'primary'
+    },
+    {
+      value: 'chain',
+      label: '连锁',
+      type: 'success'
+    },
+    {
+      value: 'join',
+      label: '加盟',
+      type: 'danger'
+    }
+  ];
+
+  const obj = typs.find(item => item.value === shopType);
+  return obj ? obj : { value: shopType, label: shopType, type: 'info' };
+}
+
+const visible = ref(false);
+
+const queryForm = ref({
+  shopName: "",
+});
+
+// 分页大小发生变化
+function handleSizeChange(e: number) {
+  tableData.size = e;
+  getTableData();
+}
+
+// 分页发生变化
+function handleCurrentChange(e: number) {
+  tableData.page = e;
+  getTableData();
+}
+
+// 查询
+function searchHandle() {
+  tableData.page = 1;
+  getTableData();
+}
+
+// 重置
+function resetHandle() {
+  queryForm.value.shopName = "";
+  tableData.page = 1;
+  getTableData();
+}
+
+const tableData = reactive({
+  loading: false,
+  page: 1,
+  size: 10,
+  total: 0,
+  list: [],
+});
+
+// 获取店铺列表
+async function getTableData() {
+  try {
+    tableData.loading = true;
+    const res: any = await ShopApi.getList({
+      page: tableData.page,
+      size: tableData.size,
+      shopName: queryForm.value.shopName,
+    });
+    tableData.list = res.records;
+    tableData.total = res.totalRow;
+  } catch (err) {
+    console.error(err);
+  } finally {
+    tableData.loading = false;
+  }
+}
+
+const emits = defineEmits<{
+  (e: 'success', row: any): void;
+}>();
+
+function selectHandle(row: any) {
+  console.log("选择商户：", row);
+  emits('success', row);
+  visible.value = false;
+}
+
+function show() {
+  visible.value = true;
+}
+
+defineExpose({
+  show,
+});
+
+onMounted(() => {
+  getTableData();
+}); 
+</script>
+
+<style scoped lang="scss">
+.row {
+  &.mt14 {
+    margin-top: 14px;
+  }
+}
+</style>