fix：增加收银中心，供应商账单，分店管理修改

src/views/finance/supplierBill/billingRecord.vue

@@ -0,0 +1,145 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <el-card shadow="never">
+        <el-alert title="当前列表仅作为数据记录，不产生任何实际交易。" type="warning" show-icon :closable="false"
+          style="margin-bottom: 15px;" />
+        <el-row :gutter="20">
+          <el-col :span="4">
+            <el-input v-model="state.query.name" clearable placeholder="请输入耗材名称" style="width: 100%" class="filter-item"
+              @keyup.enter="getTableData" />
+          </el-col>
+
+          <el-col :span="16">
+            <el-button type="primary" @click="getTableData">查询</el-button>
+            <el-button type="primary" @click="getTableData" plain>批量付款</el-button>
+            <el-text tag="b" size="large" style="margin-left: 15px;">供应商：供应商名称</el-text>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
+    <div class="head-container">
+      <el-card shadow="never">
+        <el-table v-loading="state.tableData.loading" :data="state.tableData.list">
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column label="耗材信息">
+            <template v-slot="scope">
+              <div>{{ scope.row.shopName }}（{{ scope.row.shopName }}）</div>
+              <div>账号：{{ scope.row.shopName }}</div>
+              <div>联系电话：{{ scope.row.phone }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="账单金额" width="120" />
+          <el-table-column prop="status" label="已付款金额" width="120" />
+          <el-table-column prop="status" label="未付款金额" width="120" />
+          <el-table-column prop="status" label="创建时间" width="120" />
+          <el-table-column prop="createdAt" label="备注" />
+          <el-table-column label="操作" width="200">
+            <template v-slot="scope">
+              <el-button type="primary" size="small" link @click="handlePayment(scope.row)">
+                付款
+              </el-button>
+              <el-button type="primary" size="small" link @click="handleRecord(scope.row.id)">
+                付款记录
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+    </div>
+    <div class="head-container">
+      <el-pagination v-model:current-page="state.tableData.page" v-model:page-size="state.tableData.size"
+        :total="state.tableData.total" :page-sizes="[10, 20, 30, 50, 100]"
+        layout="total, sizes , prev, pager ,next, jumper " @current-change="paginationChange" />
+    </div>
+    <payment ref="refPayment" @refresh="getTableData"></payment>
+  </div>
+</template>
+
+<script setup>
+import ShopApi from "@/api/account/shop";
+import { ElMessageBox } from "element-plus";
+import payment from "./components/payment.vue";
+
+const route = useRoute();
+const router = useRouter();
+
+const state = reactive({
+  query: {
+    name: "",
+  },
+  tableData: {
+    list: [],
+    page: 1,
+    size: 10,
+    loading: false,
+    total: 0,
+  },
+});
+onMounted(() => {
+  console.log(route.query);
+  if (route.query.id) {
+  }
+  getTableData();
+});
+// 获取商家列表
+async function getTableData() {
+  state.tableData.loading = true;
+  try {
+    const res = await ShopApi.getList({
+      page: state.tableData.page,
+      size: state.tableData.size,
+      shopName: state.query.name,
+      account: state.query.account,
+      status: state.query.status,
+    });
+    state.tableData.loading = false;
+    state.tableData.list = res.records;
+    state.tableData.total = res.totalRow * 1;
+  } catch (error) {
+    console.log(error);
+  }
+}
+const refPayment = ref();
+function handlePayment(item) {
+  refPayment.value.open(item);
+}
+// 付款记录
+function handleRecord(id) {
+  router.push({ name: "financePaymentRecord", query: { id: id } });
+
+}
+
+// 重置查询
+function resetHandle() {
+  state.query.name = "";
+  getTableData();
+}
+// 分页回调
+function paginationChange(e) {
+  state.tableData.page = e;
+  getTableData();
+}
+
+</script>
+
+<style scoped lang="scss">
+.head-container {
+  margin-bottom: 20px;
+}
+
+.shop_info {
+  display: flex;
+
+  .info {
+    flex: 1;
+    padding-left: 4px;
+  }
+}
+
+.el-link {
+  min-height: 23px;
+  margin: 0 5px;
+}
+</style>

src/views/finance/supplierBill/components/payment.vue

@@ -0,0 +1,81 @@
+<template>
+  <!-- 修改和增加 -->
+  <el-dialog title="付款" v-model="show" width="400px" @close="reset">
+    <el-form :inline="false" ref="refform" label-width="90" :model="form" :rules="rules" class="demo-form-inline">
+      <el-form-item label="供应商" prop="conName">
+        <el-input v-model="form.conName" placeholder="请输入供应商名称"></el-input>
+      </el-form-item>
+      <el-form-item label="付款金额 " prop="price">
+        <el-input-number v-model="form.price" placeholder="请输入付款金额" style="width: 100%;"></el-input-number>
+      </el-form-item>
+      <el-form-item label="付款方式" prop="conName">
+        <el-input v-model="form.conName" placeholder="请输入付款方式"></el-input>
+      </el-form-item>
+      <el-form-item label="备注" prop="defaultUnit">
+        <el-input v-model="form.defaultUnit" placeholder="请输入备注"></el-input>
+      </el-form-item>
+      <el-form-item style="display: flex; justify-content: flex-end">
+        <el-button @click="close">取 消</el-button>
+        <el-button type="primary" @click="submitForm('refform')">确 定</el-button>
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+
+<script setup>
+import consApi from "@/api/product/cons";
+import { ElMessage } from "element-plus";
+
+const emits = defineEmits(["refresh"]);
+
+const rules = {
+  conName: [{ required: true, message: "请输入耗材名称", trigger: "blur" }],
+  price: [{ required: true, message: "请输入耗材价格", trigger: "blur" }],
+  conWarning: [{ required: true, message: "请输入付款金额", trigger: "blur" }],
+  conUnit: [{ required: true, message: "请输入付款方式", trigger: "blur" }],
+ 
+};
+
+const basicForm = {
+  conName: "",
+  consGroupId: "",
+  conUnit: "",
+  price: undefined,
+  conWarning: undefined,
+};
+const form = reactive({
+  ...basicForm,
+});
+
+const show = ref(false);
+function open(item) {
+  Object.assign(form, item);
+  show.value = true;
+}
+
+function close() {
+  show.value = false;
+}
+const refform = ref();
+async function submitForm() {
+  refform.value.validate(async (valid) => {
+    if (valid) {
+      const res = await consApi.add(form);
+      ElMessage({ type: "success", message:  "付款成功" });
+      emits("refresh");
+      close();
+    }
+  });
+}
+
+function reset() {
+  console.log("reset");
+  Object.assign(form, basicForm);
+  console.log(form);
+}
+defineExpose({
+  open,
+  close,
+});
+</script>

src/views/finance/supplierBill/index.vue

@@ -0,0 +1,139 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <el-card shadow="never">
+        <el-alert title="当前列表仅作为数据记录，不产生任何实际交易。" type="warning" show-icon :closable="false"
+          style="margin-bottom: 15px;" />
+        <el-row :gutter="20">
+          <el-col :span="4">
+            <el-input v-model="state.query.name" clearable placeholder="请输入供应商名称" style="width: 100%"
+              class="filter-item" @keyup.enter="getTableData" />
+          </el-col>
+
+          <el-col :span="16">
+            <el-button type="primary" @click="getTableData">查询</el-button>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
+    <div class="head-container">
+      <el-card shadow="never">
+        <el-row :gutter="24">
+          <el-col :span="8" style="display: flex;flex-direction: column; justify-content: center;align-items: center;">
+            <div>账单总金额（全部/本月）</div>
+            <div>2000/1000</div>
+          </el-col>
+
+          <el-col :span="8" style="display: flex;flex-direction: column; justify-content: center;align-items: center;">
+            <div>已付款总金额（全部/本月）</div>
+            <div>2000/1000</div>
+          </el-col>
+          <el-col :span="8" style="display: flex;flex-direction: column; justify-content: center;align-items: center;">
+            <div>未付款总金额（全部/本月）</div>
+            <div>2000/1000</div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
+    <div class="head-container">
+      <el-card shadow="never">
+        <el-table v-loading="state.tableData.loading" :data="state.tableData.list">
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column prop="status" label="供应商"  width="220" />
+          <el-table-column prop="status" label="账单金额" width="160" />
+          <el-table-column prop="status" label="已付款金额" width="160" />
+          <el-table-column prop="status" label="未付款金额" width="160" />
+          <el-table-column prop="createdAt" label="备注" />
+          <el-table-column label="操作" width="120">
+            <template v-slot="scope">
+              <el-button type="primary" size="small" link @click="handleTo(scope.row.id)">
+                账单记录
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+    </div>
+    <div class="head-container">
+      <el-pagination v-model:current-page="state.tableData.page" v-model:page-size="state.tableData.size"
+        :total="state.tableData.total" :page-sizes="[10, 20, 30, 50, 100]"
+        layout="total, sizes , prev, pager ,next, jumper " @current-change="paginationChange" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ShopApi from "@/api/account/shop";
+const router = useRouter();
+
+const state = reactive({
+  query: {
+    name: "",
+  },
+  tableData: {
+    list: [],
+    page: 1,
+    size: 10,
+    loading: false,
+    total: 0,
+  },
+});
+onMounted(() => {
+  getTableData();
+});
+// 获取商家列表
+async function getTableData() {
+  state.tableData.loading = true;
+  try {
+    const res = await ShopApi.getList({
+      page: state.tableData.page,
+      size: state.tableData.size,
+      shopName: state.query.name,
+      account: state.query.account,
+      status: state.query.status,
+    });
+    state.tableData.loading = false;
+    state.tableData.list = res.records;
+    state.tableData.total = res.totalRow * 1;
+  } catch (error) {
+    console.log(error);
+  }
+}
+function handleTo(id) {
+  // router.push({ path: "/finance/supplierBill/billingRecord", query: { id: e.id } });
+  router.push({ name: "financeBillingRecord", query: { id: id } });
+
+}
+// 重置查询
+function resetHandle() {
+  state.query.name = "";
+  getTableData();
+}
+// 分页回调
+function paginationChange(e) {
+  state.tableData.page = e;
+  getTableData();
+}
+
+</script>
+
+<style scoped lang="scss">
+.head-container {
+  margin-bottom: 20px;
+}
+
+.shop_info {
+  display: flex;
+
+  .info {
+    flex: 1;
+    padding-left: 4px;
+  }
+}
+
+.el-link {
+  min-height: 23px;
+  margin: 0 5px;
+}
+</style>

src/views/finance/supplierBill/paymentRecord.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="app-container">
+    <div class="head-container">
+      <el-card shadow="never">
+        <el-alert title="当前列表仅作为数据记录，不产生任何实际交易。" type="warning" show-icon :closable="false"
+          style="margin-bottom: 15px;" />
+        <el-text tag="b" size="large" style="margin-left: 15px;">供应商：供应商名称</el-text>
+      </el-card>
+    </div>
+    <div class="head-container">
+      <el-card shadow="never">
+        <el-table v-loading="state.tableData.loading" :data="state.tableData.list">
+          <el-table-column prop="id" label="ID" width="80" />
+          <el-table-column label="耗材信息">
+            <template v-slot="scope">
+              <div>{{ scope.row.shopName }}（{{ scope.row.shopName }}）</div>
+              <div>账号：{{ scope.row.shopName }}</div>
+              <div>联系电话：{{ scope.row.phone }}</div>
+            </template>
+          </el-table-column>
+          <el-table-column prop="status" label="付款金额" width="120" />
+          <el-table-column prop="status" label="付款方式" width="120" />
+          <el-table-column prop="createdAt" label="备注" />
+          <el-table-column prop="status" label="创建时间" />
+          <el-table-column label="操作人" width="200">
+            <template v-slot="scope">
+              <div>员工名称：{{ scope.row.shopName }}</div>
+              <div>员工编号：{{ scope.row.shopName }}</div>
+              <div>员工账号：{{ scope.row.phone }}</div>
+            </template>
+          </el-table-column>
+        </el-table>
+      </el-card>
+
+    </div>
+    <div class="head-container">
+      <el-pagination v-model:current-page="state.tableData.page" v-model:page-size="state.tableData.size"
+        :total="state.tableData.total" :page-sizes="[10, 20, 30, 50, 100]"
+        layout="total, sizes , prev, pager ,next, jumper " @current-change="paginationChange" />
+    </div>
+  </div>
+</template>
+
+<script setup>
+import ShopApi from "@/api/account/shop";
+import { ElMessageBox } from "element-plus";
+const route = useRoute();
+
+const state = reactive({
+  query: {
+    name: "",
+  },
+  tableData: {
+    list: [],
+    page: 1,
+    size: 10,
+    loading: false,
+    total: 0,
+  },
+});
+onMounted(() => {
+  console.log(route.query);
+  if (route.query.id) {
+  }
+  getTableData();
+});
+// 获取商家列表
+async function getTableData() {
+  state.tableData.loading = true;
+  try {
+    const res = await ShopApi.getList({
+      page: state.tableData.page,
+      size: state.tableData.size,
+      shopName: state.query.name,
+      account: state.query.account,
+      status: state.query.status,
+    });
+    state.tableData.loading = false;
+    state.tableData.list = res.records;
+    state.tableData.total = res.totalRow * 1;
+  } catch (error) {
+    console.log(error);
+  }
+}
+function handleSync(e) {
+  console.log(e)
+  ElMessageBox.confirm(`同步功能开启后不能关闭，请确认是否给${e.shopName}开启同步?`, "提示", {
+    confirmButtonText: "确认",
+    cancelButtonText: "取消",
+    type: "warning",
+  }).then(async () => {
+    const res = await ShopApi.delete({ id: row.id });
+    ElMessage({
+      type: "success",
+      message: "同步成功",
+    });
+    getTableData();
+  }).catch(() => { });
+}
+// 重置查询
+function resetHandle() {
+  state.query.name = "";
+  getTableData();
+}
+// 分页回调
+function paginationChange(e) {
+  state.tableData.page = e;
+  getTableData();
+}
+
+</script>
+
+<style scoped lang="scss">
+.head-container {
+  margin-bottom: 20px;
+}
+
+.shop_info {
+  display: flex;
+
+  .info {
+    flex: 1;
+    padding-left: 4px;
+  }
+}
+
+.el-link {
+  min-height: 23px;
+  margin: 0 5px;
+}
+</style>