联调

src/views/MiniMall/Purchase/index.vue

@@ -1,22 +1,76 @@
 <template>
   <div>
-    <!-- 搜索工作栏 -->
-    <Search :schema="allSchemas.searchSchema" labelWidth="0">
-      <template #actionMore>
+    <el-form inline :model="queryParams" class="-mb-15px" label-width="0">
+      <el-form-item>
+        <el-select
+          v-model="queryParams.productId"
+          placeholder="选择产品"
+          clearable
+          filterable
+          @change="changeProd"
+        >
+          <el-option
+            v-for="item in opts.product"
+            :key="item.productId"
+            :label="item.productName"
+            :value="item.productId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-select
+          v-model="queryParams.specsId"
+          placeholder="选择规格"
+          clearable
+          filterable
+          :disabled="!queryParams.productId"
+        >
+          <el-option
+            v-for="item in opts.spec"
+            :key="item.specsId"
+            :label="item.specsName"
+            :value="item.specsId"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-select v-model="queryParams.supplier" placeholder="供应商" clearable filterable>
+          <el-option
+            v-for="item in opts.supplier"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-date-picker
+          v-model="queryParams.applyTime"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="申请时间"
+          end-placeholder="申请时间"
+        />
+      </el-form-item>
+      <el-form-item>
+        <el-date-picker
+          v-model="queryParams.checkTime"
+          type="daterange"
+          range-separator="-"
+          start-placeholder="审核时间"
+          end-placeholder="审核时间"
+        />
+      </el-form-item>
+      <el-form-item>
         <el-button @click="getList" v-hasPermi="['mall:purchase:search']"> 搜索 </el-button>
         <el-button @click="resetQuery" v-hasPermi="['mall:purchase:reset']"> 重置 </el-button>
         <el-button type="primary" @click="handleAdd" v-hasPermi="['mall:purchase:add']">
           发起采购
         </el-button>
-      </template>
-    </Search>
+      </el-form-item>
+    </el-form>
     <!-- 列表 -->
-    <SSTable
-      class="mt-20px"
-      v-model:tableObject="tableObject"
-      :tableColumns="allSchemas.tableColumns"
-      @get-list="getTableList"
-    >
+    <el-table v-loading="loading" class="mt-20px" :data="tableList" border>
       <el-table-column
         v-for="item in allSchemas.tableColumns"
         :key="item.table?.field || item.field"
@@ -24,6 +78,7 @@
         :label="item.label"
         :fixed="item.fixed"
         min-width="150px"
+        :formatter="item.formatter"
         showOverflowTooltip
       />
       <el-table-column label="操作" width="150px" fixed="right">
@@ -56,53 +111,89 @@
           </el-button>
         </template>
       </el-table-column>
-    </SSTable>
-    <DialogAdd ref="creatPurchase" />
+    </el-table>
+    <!-- 分页 -->
+    <Pagination
+      v-model:limit="queryParams.pageSize"
+      v-model:page="queryParams.pageNo"
+      :total="total"
+      @pagination="getList"
+    />
+
+    <DialogAdd :opts="opts" ref="creatPurchase" />
     <DialogAudit ref="auditPurchase" />
   </div>
 </template>
 
-<script setup>
+<script setup name="Purchase">
+import * as ProductApi from '@/api/mall/product'
 import { allSchemas } from './index.data.js'
 import DialogAdd from './Comp/DialogAdd.vue'
 import DialogAudit from './Comp/DialogAudit.vue'
+import * as PurchaseApi from '@/api/mall/purchase'
+import { getDictOptions } from '@/utils/dict'
 
 const creatPurchase = ref()
 const auditPurchase = ref()
 
-const tableObject = ref({
-  tableList: [],
-  loading: false,
-  total: 1,
-  pageSize: 20,
-  currentPage: 1
+const opts = ref({
+  product: [],
+  spec: [],
+  supplier: []
 })
 
+const tableList = ref([])
+const loading = ref(false)
+const total = ref(0)
+
+const queryParams = ref({
+  productId: undefined,
+  specsId: undefined,
+  supplier: undefined,
+  applyTime: [],
+  checkTime: [],
+  pageNo: 1,
+  pageSize: 20
+})
+
+function getOptions() {
+  ProductApi.getSimpleProductList().then((data) => {
+    opts.value.product = data
+  })
+  opts.value.supplier = getDictOptions('erp_supplier')
+}
+
+function changeProd(val) {
+  if (val) {
+    opts.value.spec = opts.value.product.find((it) => it.productId == val).productSpecList
+  } else {
+    opts.value.spec = []
+  }
+  queryParams.value.specsId = undefined
+}
+
 function resetQuery() {
   queryParams.value = {
-    productName: undefined,
-    productBrand: undefined,
-    productCategory: undefined,
+    productId: undefined,
+    specsId: undefined,
+    supplier: undefined,
+    applyTime: [],
+    checkTime: [],
     pageNo: 1,
-    pageSize: 10
+    pageSize: 20
   }
   getList()
 }
 
-const getList = function () {
-  tableObject.value.tableList = [
-    { name: '测试', status: 1, statusName: '审核中', supplier: '林氏木业', purchaseCount: 10 },
-    { name: '测试2', status: 2, statusName: '已通过', supplier: '张氏木业', purchaseCount: 1 },
-    { name: '测试3', status: 3, statusName: '已驳回', supplier: '周氏木业', purchaseCount: 5 }
-  ]
-}
-
-function getTableList() {
-  tableObject.value.tableList = [
-    { name: '测试', status: 1, statusName: '审核中', supplier: '林氏木业', purchaseCount: 10 },
-    { name: '测试2', status: 2, statusName: '已通过', supplier: '张氏木业', purchaseCount: 1 },
-    { name: '测试3', status: 3, statusName: '已驳回', supplier: '周氏木业', purchaseCount: 5 }
-  ]
+const getList = async function () {
+  loading.value = true
+  try {
+    const data = await PurchaseApi.getPurchasePage(queryParams.value)
+    tableList.value = data.list
+    total.value = data.total
+  } finally {
+    loading.value = false
+  }
 }
 
 function purchaseAgain(row) {
@@ -119,6 +210,11 @@ function handleAdd() {
 function handleDetail(row) {
   auditPurchase.value.open({ ...row }, false)
 }
+
+onMounted(() => {
+  getOptions()
+  getList()
+})
 </script>
 
 <style lang="scss" scoped></style>