联调

2024-06-05 17:08:27 +08:00
parent a557255b4a
commit 94943df4f9
30 changed files with 1069 additions and 846 deletions
--- a/src/views/MiniMall/Purchase/Comp/DialogAdd.vue
+++ b/src/views/MiniMall/Purchase/Comp/DialogAdd.vue
@@ -1,27 +1,27 @@
 <template>
  <Dialog title="发起采购" v-model="dialogVisible" width="800px">
-    <el-form :model="form" ref="addForm" :rules="rules" label-width="100px">
+    <el-form :model="form" ref="formRef" :rules="rules" label-width="100px">
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
-          <el-form-item label="产品" prop="product">
-            <el-select v-model="form.product" placeholder="请选择" filterable style="width: 100%">
+          <el-form-item label="产品" prop="productId">
+            <el-select v-model="form.productId" placeholder="请选择" filterable style="width: 100%">
              <el-option
-                v-for="item in productOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="item in props.opts.product"
+                :key="item.productId"
+                :label="item.productName"
+                :value="item.productId"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
-          <el-form-item label="规格" prop="specs">
-            <el-select v-model="form.specs" placeholder="请选择" filterable style="width: 100%">
+          <el-form-item label="规格" prop="specsId">
+            <el-select v-model="form.specsId" placeholder="请选择" filterable style="width: 100%">
              <el-option
-                v-for="item in specsOptions"
-                :key="item.value"
-                :label="item.label"
-                :value="item.value"
+                v-for="item in specOptions"
+                :key="item.specsId"
+                :label="item.specsName"
+                :value="item.specsId"
              />
            </el-select>
          </el-form-item>
@@ -30,34 +30,41 @@
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
          <el-form-item label="供应商" prop="supplier">
-            <el-input v-model="form.supplier" placeholder="请输入" />
+            <el-select v-model="form.supplier" placeholder="选择供应商" filterable>
+              <el-option
+                v-for="item in opts.supplier"
+                :key="item.value"
+                :label="item.label"
+                :value="item.value"
+              />
+            </el-select>
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
-          <el-form-item label="采购数量" prop="purchaseCount">
-            <el-input-number
-              :min="1"
-              v-model="form.purchaseCount"
-              placeholder="请输入"
-              style="width: 100%"
-            />
+          <el-form-item label="采购数量" prop="num">
+            <el-input-number :min="1" v-model="form.num" placeholder="请输入" style="width: 100%" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12" :offset="0">
-          <el-form-item label="采购单价" prop="price">
+          <el-form-item label="采购单价" prop="unitPrice">
            <el-input-number
              :min="0"
-              v-model="form.price"
+              v-model="form.unitPrice"
              placeholder="请输入"
              style="width: 100%"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12" :offset="0">
-          <el-form-item label="存放仓库" prop="warehouse">
-            <el-select v-model="form.warehouse" placeholder="请选择" filterable style="width: 100%">
+          <el-form-item label="存放仓库" prop="warehouseId">
+            <el-select
+              v-model="form.warehouseId"
+              placeholder="请选择"
+              filterable
+              style="width: 100%"
+            >
              <el-option
                v-for="item in warehouseOptions"
                :key="item.value"
@@ -86,13 +93,42 @@
 </template>

 <script setup>
+import * as PurchaseApi from '@/api/mall/purchase'
+const props = defineProps({
+  opts: {
+    type: Object,
+    default: () => {
+      return {
+        product: [],
+        spec: [],
+        supplier: []
+      }
+    }
+  }
+})
+
+const specOptions = computed(() => {
+  if (form.value.productId) {
+    return (
+      props.opts.product.find((it) => it.productId == form.value.productId)?.productSpecList || []
+    )
+  } else {
+    return []
+  }
+})
+
 const dialogVisible = ref(false) // 弹窗的是否展示

-const form = ref()
-const rules = ref({})
+const form = ref({})
+const rules = {
+  productId: { required: true, message: '产品不可为空', trigger: 'change' },
+  specsId: { required: true, message: '规格不可为空', trigger: 'change' },
+  supplier: { required: true, message: '供应商不可为空', trigger: 'change' },
+  warehouseId: { required: true, message: '仓库不可为空', trigger: 'change' },
+  num: { required: true, message: '采购数量不可为空', trigger: 'change,blur' },
+  unitPrice: { required: true, message: '采购单价不可为空', trigger: 'change,blur' }
+}

-const productOptions = ref([])
-const specsOptions = ref([])
 const warehouseOptions = ref([
  { label: '自营仓', value: 1 },
  { label: '供应商仓', value: 2 }
@@ -100,19 +136,37 @@ const warehouseOptions = ref([

 const open = (val) => {
  dialogVisible.value = true
-  form.value = val || {
-    product: '',
-    specs: '',
-    supplier: '',
-    purchaseCount: 1,
-    warehouse: 1,
-    remark: ''
+  form.value = { ...val } || {
+    productId: undefined,
+    specsId: undefined,
+    supplier: undefined,
+    num: undefined,
+    unitPrice: undefined,
+    warehouseId: undefined,
+    remark: undefined
  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗

-function handleSave() {
-  console.log('保存')
+const formRef = ref()
+const formLoading = ref(false)
+
+async function handleSave() {
+  // 校验表单
+  if (!formRef.value) return
+  const valid = await formRef.value.validate()
+  if (!valid) return
+  // 提交请求
+  formLoading.value = true
+  try {
+    await PurchaseApi.createPurchase(form.value)
+    message.success(t('common.createSuccess'))
+    dialogVisible.value = false
+    // 发送操作成功的事件
+    emit('success')
+  } finally {
+    formLoading.value = false
+  }
 }
 </script>

--- a/src/views/MiniMall/Purchase/Comp/DialogAudit.vue
+++ b/src/views/MiniMall/Purchase/Comp/DialogAudit.vue
@@ -1,11 +1,11 @@
 <template>
  <Dialog title="采购审核" v-model="dialogVisible" width="800px">
    <Descriptions :data="form" :schema="schema" :columns="3" />
-    <el-form v-if="canEdit" :model="form" ref="auditForm" :rules="rules" label-width="80px">
+    <el-form v-if="canEdit" :model="form" ref="auditForm" label-width="80px">
      <el-row :gutter="20">
        <el-col :span="24" :offset="0">
-          <el-form-item label="审核" prop="status">
-            <el-radio-group v-model="form.status">
+          <el-form-item label="审核" prop="isPass">
+            <el-radio-group v-model="form.isPass">
              <el-radio :label="2">通过</el-radio>
              <el-radio :label="3">驳回</el-radio>
            </el-radio-group>
@@ -29,74 +29,31 @@
  </Dialog>
 </template>

-<script setup>
+<script setup name="DialogAuditPurchase">
 const dialogVisible = ref(false) // 弹窗的是否展示

 const form = ref({})
-const rules = ref({})
 const canEdit = ref(true)

-const schema = ref([
-  {
-    field: 'name',
-    label: '产品名称'
-  },
-  {
-    field: 'specsName',
-    label: '规格名称'
-  },
-  {
-    field: 'supplier',
-    label: '供应商'
-  },
-  {
-    field: 'purchaseCount',
-    label: '采购数量'
-  },
-  {
-    field: 'unitPrice',
-    label: '采购单价'
-  },
-  {
-    field: 'totalPrice',
-    label: '总金额'
-  },
-  {
-    field: 'warehouse',
-    label: '仓库'
-  },
-  {
-    field: 'warehouse',
-    label: '申请人'
-  },
-  {
-    field: '',
-    label: '申请时间'
-  },
-  {
-    field: 'remark',
-    label: '备注',
-    isEditor: true,
-    span: 3
-  }
-])
+const schema = ref([])

 const open = (val, flag) => {
  dialogVisible.value = true
-  form.value = { ...val, status: 2, remark: '<p style="color: red;">哈哈哈</p>' }
+  form.value = { ...val }
  canEdit.value = flag
+  resetSchema()
  if (!canEdit.value) {
    const arr = [
      {
-        field: 'status',
+        field: 'auditStatusName',
        label: '采购状态'
      },
      {
-        field: 'auditUser',
+        field: 'checkUserName',
        label: '审核人'
      },
      {
-        field: 'auditTime',
+        field: 'checkTime',
        label: '审核时间'
      },
      {
@@ -107,10 +64,61 @@ const open = (val, flag) => {
      }
    ]
    schema.value = [...schema.value, ...arr]
+  } else {
+    form.value.isPass = 2
+    form.value.auditRemark = ''
  }
 }
 defineExpose({ open }) // 提供 open 方法，用于打开弹窗

+const resetSchema = () => {
+  schema.value = [
+    {
+      field: 'productName',
+      label: '产品名称'
+    },
+    {
+      field: 'specsName',
+      label: '规格名称'
+    },
+    {
+      field: 'supplier',
+      label: '供应商'
+    },
+    {
+      field: 'num',
+      label: '采购数量'
+    },
+    {
+      field: 'unitPrice',
+      label: '采购单价'
+    },
+    {
+      field: 'totalPrice',
+      label: '总金额'
+    },
+    {
+      field: 'warehouseName',
+      label: '仓库'
+    },
+    {
+      field: 'applyUserName',
+      label: '申请人'
+    },
+    {
+      field: 'applyTime',
+      label: '申请时间',
+      dateFormat: 'YYYY-MM-DD'
+    },
+    {
+      field: 'remark',
+      label: '备注',
+      isEditor: true,
+      span: 3
+    }
+  ]
+}
+
 function handleSave() {
  console.log('保存')
 }
--- a/src/views/MiniMall/Purchase/index.data.js
+++ b/src/views/MiniMall/Purchase/index.data.js
@@ -1,4 +1,3 @@
-// import { CrudSchema } from '@/hooks/web/useCrudSchemas'
 import { dateFormatter } from '@/utils/formatTime'

 const statusOptions = [
@@ -7,11 +6,10 @@ const statusOptions = [
  { label: '已驳回', value: 3 }
 ]

-// CrudSchema：https://doc.iocoder.cn/vue3/crud-schema/
 const crudSchemas = reactive([
  {
    label: '产品名称',
-    field: 'name',
+    field: 'productName',
    isSearch: true,
    isTable: true
  },
@@ -29,7 +27,7 @@ const crudSchemas = reactive([
  },
  {
    label: '采购数量',
-    field: 'purchaseCount',
+    field: 'num',
    isSearch: false,
    isTable: true
  },
@@ -47,7 +45,7 @@ const crudSchemas = reactive([
  },
  {
    label: '仓库',
-    field: 'warehouse',
+    field: 'warehouseName',
    isSearch: false,
    isTable: true
  },
@@ -79,13 +77,13 @@ const crudSchemas = reactive([
  },
  {
    label: '审核人',
-    field: 'auditUserName',
+    field: 'checkUserName',
    isSearch: true,
    isTable: true
  },
  {
    label: '审核时间',
-    field: 'auditTime',
+    field: 'checkTime',
    isSearch: true,
    isTable: true,
    formatter: dateFormatter,
@@ -105,7 +103,7 @@ const crudSchemas = reactive([
  },
  {
    label: '采购状态',
-    field: 'status',
+    field: 'auditStatus',
    isSearch: true,
    isTable: true,
    search: {
@@ -119,7 +117,7 @@ const crudSchemas = reactive([
      }
    },
    table: {
-      field: 'statusName',
+      field: 'auditStatusName',
      fixed: 'right'
    }
  },
--- a/src/views/MiniMall/Purchase/index.vue
+++ b/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>