feat(第二版）: 添加材料管理功能，包括获取材料列表、保存和删除材料，优化材料表单

src/api/material.js

@@ -0,0 +1,53 @@
+import request from '@/utils/request'
+
+// 获取材料列表
+export function getMaterialList(param) {
+  return request({
+    url: '/backendApi/material/list',
+    method: 'get',
+    params: param
+  })
+}
+// 获取材料分类列表
+export function getAllMaterialType() {
+  return request({
+    url: '/backendApi/material_type/getAllMaterialType',
+    method: 'get',
+  })
+}
+
+// 保持材料
+export function saveMaterial(data) {
+  return request({
+    url: '/backendApi/material/save',
+    data:data,
+    method: 'post',
+  })
+}
+
+// 删除材料
+export function deleteMaterialById(id) {
+  return request({
+    url: `/backendApi/material/delete/${id}`,
+    method: 'delete',
+  })
+}
+
+// 采购订单表列表查询
+export function getPurchaseOrderList(params) {
+  return request({
+    url: '/backendApi/purchase_order/list',
+    method: 'get',
+    params: params
+  })
+}
+// 保存采购订单
+export function savePurchaseOrderController(data) {
+  return request({
+    url: '/backendApi/purchase_order/save',
+    method: 'post',
+    data: data
+  })
+}
+
+

src/components/ImageUpload/index.vue

@@ -59,7 +59,7 @@ export default {
     // 大小限制(MB)
     fileSize: {
       type: Number,
-      default: 5
+      default: 10
     },
     // 文件类型, 例如['png', 'jpg', 'jpeg']
     fileType: {
@@ -130,15 +130,18 @@ export default {
     },
     // 上传成功回调
     handleUploadSuccess(res) {
+
       if (res && res?.data) {
         // this.uploadList.push({ name: res.data.fileName, url: res.data.url })
         this.uploadList.push(res.data.url)
 
         if (this.uploadList.length === this.number) {
           this.fileList = this.fileList.concat(this.uploadList)
+          console.log(this.fileList,this.uploadList)
           this.uploadList = []
           this.number = 0
-          this.$emit('input', this.listToString(this.fileList))
+          //原 this.listToString(this.fileList)
+          this.$emit('input', this.fileList.toString())
           this.$modal.closeLoading()
         }
       }
@@ -170,10 +173,13 @@ export default {
       }
       if (this.fileSize) {
         const isLt = file.size / 1024 / 1024 < this.fileSize
-        this.$modal.msgError(
-          `${this.$t('ImageUpload.fileSizeExceed')}${this.fileSize} ${this.$t('ImageUpload.mb')}`
-        )
-        return false
+        if (!isLt){
+          this.$modal.msgError(
+            `${this.$t('ImageUpload.fileSizeExceed')}${this.fileSize} ${this.$t('ImageUpload.mb')}`
+          )
+          return false
+        }
+
       }
 
       this.$modal.loading(`${this.$t('ImageUpload.uploadingImage')}`)
@@ -195,12 +201,11 @@ export default {
     },
     // 对象转成指定字符串分隔
     listToString(list, separator) {
-      let strs = ''
-      separator = separator || ','
-      for (let i in list) {
-        strs += list[i].url?.replace(this.baseUrl, '') + separator
-      }
-      return strs != '' ? strs.substr(0, strs.length - 1) : ''
+      const sep = separator || ',';
+      return list.map(item => {
+        const url = item.url?.replace(this.baseUrl, '') || '';
+        return url;
+      }).join(sep);
     }
   }
 }

src/views/material/list/add.vue

@@ -2,12 +2,13 @@
   <div class="app-container">
     <Paragraph title="基础信息">
       <template>
-        <FormUI ref="formUI" />
+        <FormUI ref="formUI" :materialTypeList="materialTypeList"/>
         <el-row type="flex" class="row-bg" justify="center">
           <el-col :span="8">
             <el-button size="mini" @click="handleCancel">取消添加</el-button>
             <el-button type="primary" size="mini" @click="handleSubmit"
-              >确认保存</el-button
+            >确认保存
+            </el-button
             >
           </el-col>
         </el-row>
@@ -16,28 +17,48 @@
   </div>
 </template>
 <script>
-import FormUI from "./formUI.vue";
-import Paragraph from "@/components/Paragraph";
-export default {
-  name: "Add",
-  components: { FormUI, Paragraph },
-  props: {},
-  data() {
-    return {};
-  },
-  methods: {
-    handleCancel() {
-      this.$store.dispatch("tagsView/delView", this.$route);
-      this.$router.push({ path: "/material/list" });
+  import FormUI from "./formUI.vue";
+  import Paragraph from "@/components/Paragraph";
+  import {getAllMaterialType, saveMaterial} from "../../../api/material";
+
+  export default {
+    name: "Add",
+    components: {FormUI, Paragraph},
+    props: {},
+    data() {
+      return {
+        materialTypeList: []
+      };
     },
-    async handleSubmit() {
-      await this.$refs.formUI.validate();
+    mounted() {
+      this.getAllMaterialType()
     },
-  },
-};
+    methods: {
+      handleCancel() {
+        this.$store.dispatch("tagsView/delView", this.$route);
+        this.$router.push({path: "/material/list"});
+      },
+      async handleSubmit() {
+        var submitData = await this.$refs.formUI.validate()
+        console.log(submitData)
+        saveMaterial(submitData).then(res => {
+          if (res.code === 200) {
+            const successMsg = this.$t('merchant.statusChangeSuccess', { action: "原材料新增" });
+            this.$modal.msgSuccess(successMsg);
+            this.$router.push({path: "/material/list"});
+          }
+        })
+      },
+      getAllMaterialType() {
+        getAllMaterialType().then(res => {
+          this.materialTypeList = res.data
+        })
+      }
+    },
+  };
 </script>
 <style lang="scss" scoped>
-.container {
-  width: 60%;
-}
+  .container {
+    width: 60%;
+  }
 </style>

src/views/material/list/formUI.vue

@@ -4,52 +4,58 @@
     :model="form"
     :disabled="disabled"
     size="mini"
-    label-width="100px"
-  >
-    <el-row :gutter="20">
-      <el-col :span="12">
+    label-width="100px">
+    <el-row :gutter="24">
+      <el-col :span="10">
         <el-form-item label="材料名称" prop="name" required>
           <el-input v-model="form.name"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="10">
         <el-form-item label="原材料编号" required>
-          <el-input v-model="form.name1"></el-input>
+          <el-input v-model="form.materialNo"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="10">
         <el-form-item label="规格" required>
-          <el-input v-model="form.name2"></el-input>
+          <el-input v-model="form.specification"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="10">
         <el-form-item label="入库数量" required>
-          <el-input v-model="form.name3"></el-input>
+          <el-input v-model="form.inventory"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="10">
         <el-form-item label="保质期" required>
-          <el-input v-model="form.name4"></el-input>
+          <el-input v-model="form.shelfLife"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="10">
         <el-form-item label="单位" required>
-          <el-input v-model="form.name5"></el-input>
+          <el-input v-model="form.unit"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
+      <el-col :span="10">
         <el-form-item label="采购期数" required>
-          <el-input v-model="form.name6"></el-input>
+          <el-input v-model="form.purchasePeriod"></el-input>
         </el-form-item>
       </el-col>
-      <el-col :span="12">
-        <el-form-item label="商品类别" required>
-          <el-input v-model="form.name7"></el-input>
+      <el-col :span="10">
+        <el-form-item label="材料类别" required>
+          <el-select v-model="form.materialTypeId" placeholder="请选择材料类别">
+            <el-option
+              v-for="item in materialTypeList"
+              :key="item.value"
+              :label="item.label"
+              :value="item.value">
+            </el-option>
+          </el-select>
         </el-form-item>
       </el-col>
-      <el-col :span="24">
+      <el-col :span="10">
         <el-form-item label="材料图片" required>
-          <ImageUpload :isShowTip="false" :limit="1" />
+          <ImageUpload @input="input" :isShowTip="false" :limit="1" />
         </el-form-item>
       </el-col>
     </el-row>
@@ -64,6 +70,10 @@ export default {
       type: Object,
       default: () => ({}),
     },
+    materialTypeList:{
+      type:Array,
+      default:()=>([])
+    },
     disabled: {
       type: Boolean,
       default: false,
@@ -78,13 +88,16 @@ export default {
       return new Promise((resolve, reject) => {
         this.$refs.form.validate((valid) => {
           if (valid) {
-            resolve();
+            resolve(this.form);
           } else {
             reject();
           }
         });
       });
     },
+    input(url){
+      this.form.fileId = url
+    }
   },
 };
 </script>

src/views/material/list/index.vue

@@ -1,77 +1,159 @@
 <template>
-  <div>
-    <Page>
-      <template #search="{ form, search }">
-        <el-form-item label="名称" prop="name">
-          <el-input
-            v-model="form.name"
-            placeholder="请输入名称"
-            clearable
-            size="small"
-            @keyup.enter.native="search"
-          />
-        </el-form-item>
-        <el-form-item label="状态" prop="status">
-          <el-input
-            v-model="form.status"
-            placeholder="请输入订单号"
-            clearable
-            @keyup.enter.native="search"
-          />
-        </el-form-item>
-        <el-form-item label="时间" prop="time">
-          <el-input
-            v-model="form.time"
-            placeholder="请输入桌码"
-            clearable
-            @keyup.enter.native="search"
-          />
-        </el-form-item>
-      </template>
-      <template #extendButton>
-        <el-button type="primary" plain icon="el-icon-plus" @click="handleAdd"
-          >新增材料</el-button
-        >
-      </template>
-      <template #default>
-        <el-table-column label="序号" prop="id" min-width="80" />
-        <el-table-column label="原材料名称" prop="1" min-width="80" />
-        <el-table-column label="规格" prop="3" min-width="80" />
-        <el-table-column label="原材料编号" prop="2" min-width="80" />
-        <el-table-column label="入库数量(单号)" prop="4" min-width="80" />
-        <el-table-column label="保质期(个月)" prop="5" min-width="80" />
-        <el-table-column label="类型" prop="6" min-width="80" />
-        <el-table-column label="创建时间" prop="7" min-width="80" />
-        <el-table-column label="状态" prop="8" min-width="80" />
-        <el-table-column label="操作" align="left" width="130" fixed="right">
-          <template slot-scope="scope">
-            <el-button size="mini" type="text">详情</el-button>
-            <el-button size="mini" type="text" icon="el-icon-edit"
-              >修改</el-button
-            >
-            <el-button size="mini" type="text">下架</el-button>
-            <el-button size="mini" type="text" icon="el-icon-delete"
-              >删除</el-button
-            >
-          </template>
-        </el-table-column>
-      </template>
-    </Page>
+  <div class="app-container">
+
+    <el-form :model="queryParams" class="main-search" ref="queryForm" size="small" :inline="true" v-show="showSearch">
+      <el-form-item label="名称" prop="name">
+        <el-input
+          v-model="queryParams.name"
+          placeholder="请输入名称"
+          clearable
+          size="small"
+          @keyup.enter.native="getList"
+        />
+      </el-form-item>
+      <el-form-item label="状态" prop="status">
+        <el-select
+          v-model="queryParams.status"
+          placeholder="状态"
+          clearable>
+          <el-option key="1" label="启用" value="1"/>
+          <el-option key="0" label="禁用" value="0"/>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="时间" prop="time">
+        <el-date-picker
+          v-model="queryParams.createTime"
+          format="yyyy 年 MM 月 dd 日"
+          value-format="yyyy-MM-dd"
+          type="date"
+          placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">搜索</el-button>
+        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        <el-button
+          type="primary"
+          plain
+          icon="el-icon-plus"
+          size="mini"
+          @click="handleAdd"
+          v-hasPermi="['material:list:add']"
+        >新增材料
+        </el-button>
+      </el-form-item>
+    </el-form>
+    <el-table ref="tables" v-loading="loading" :data="list" @selection-change="handleSelectionChange">
+      <el-table-column :show-overflow-tooltip="true" label="序号" prop="id" min-width="80"/>
+      <el-table-column label="原材料名称" prop="name" min-width="80"/>
+      <el-table-column label="规格" prop="specification" min-width="80"/>
+      <el-table-column label="原材料编号" prop="materialNo" min-width="80"/>
+      <el-table-column label="入库数量" prop="inventory" min-width="80"/>
+      <el-table-column label="保质期(个月)" prop="shelfLife" min-width="80"/>
+      <el-table-column label="类型" prop="materialType" min-width="80"/>
+      <el-table-column label="创建时间" prop="createTime" min-width="80"/>
+      <el-table-column label="状态" prop="status" min-width="80">
+        <template slot-scope="scope">
+
+          <el-switch
+            v-model="scope.row.status"
+            :active-value="1"
+            :inactive-value="0"
+            active-color="#13ce66"
+            inactive-color="#ff4949">
+          </el-switch>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="left" width="160" fixed="right">
+        <template slot-scope="scope">
+          <el-button size="mini" type="text">详情</el-button>
+          <el-button size="mini" type="text" icon="el-icon-edit"
+          >修改
+          </el-button
+          >
+          <el-button size="mini" type="text" icon="el-icon-delete" @click="deleteMaterial(scope.row)">删除
+          </el-button
+          >
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination
+      :total="total"
+      :page.sync="queryParams.pageNo"
+      :limit.sync="queryParams.pageSize"
+      @pagination="getList"
+    />
+
   </div>
 </template>
 <script>
-import Page from "@/components/Page";
-export default {
-  name: "MaterialList",
-  components: { Page },
-  data() {
-    return {};
-  },
-  methods: {
-    async getList() {},
-    handleAdd() {
-      this.$router.push({ path: "/material/list/add" });
+  import Page from "@/components/Page";
+  import {getMaterialList,deleteMaterialById} from "@/api/material";
+  export default {
+    name: "MaterialList",
+    components: {Page},
+
+    data() {
+      return {
+        list:[], //列表数据
+        queryParams: {
+          name: '',  //材料名称
+          status: null, //状态（0下架1上架）
+          createTime: null, //创建时间
+          pageNo: 1,
+          pageSize: 10
+        },
+        loading:false,
+        // 选中数组
+        ids: [],
+        // 非多个禁用
+        multiple: true,
+        // 显示搜索条件
+        showSearch: true,
+        //总数
+        total:0
+      };
+    }, mounted() {
+      this.getList()
     },
-  },
-};
+    created() {
+      console.log(111)
+    },
+    methods: {
+      getList() {
+        this.loading = true
+        getMaterialList(this.queryParams).then(res => {
+          this.loading = false
+          this.list = res.data.data;
+          this.total = res.data.total
+        })
+      },
+      deleteMaterial(row){
+        const name = row.name || this.id;
+        const confirmMsg = this.$t('merchant.confirmDelete', { name });
+        this.$modal
+          .confirm(confirmMsg)
+          .then(() => {
+            return deleteMaterialById(row.id);
+          })
+          .then(() => {
+            this.getList();
+            this.$modal.msgSuccess(this.$t('merchant.deleteSuccess'));
+          })
+          .catch(() => {});
+      },
+      handleAdd() {
+        this.$router.push({path: "/material/list/add"});
+      },
+      // 多选框选中数据
+      handleSelectionChange(selection) {
+        this.ids = selection.map(item => item.id);
+        this.multiple = !selection.length
+      },
+      resetQuery() {
+        this.queryParams = this.$options.data().queryParams
+        this.getList()
+      },
+    },
+  };
 </script>

src/views/material/order/add.vue

@@ -1,19 +1,19 @@
 <template>
   <div class="app-container">
-    <FormUI mode="add" />
+    <FormUI :submit="handleSubmit" ref="formUI" mode="add"/>
     <div class="buttons">
       <el-button size="mini" @click="handleCancel">取消添加</el-button>
-      <el-button type="primary" size="mini" @click="handleSubmit"
-        >确认保存</el-button
-      >
+      <el-button type="primary" size="mini" @click="handleSubmit">确认保存</el-button>
     </div>
   </div>
 </template>
 <script>
 import FormUI from "./formUI.vue";
+import {savePurchaseOrderController} from "@/api/material";
+
 export default {
   name: "OrderAdd",
-  components: { FormUI },
+  components: {FormUI},
   props: {},
   data() {
     return {};
@@ -21,9 +21,18 @@ export default {
   methods: {
     handleCancel() {
       this.$store.dispatch("tagsView/delView", this.$route);
-      this.$router.push({ path: "/material/order" });
+      this.$router.push({path: "/material/order"});
+    },
+    async handleSubmit() {
+      var submitData = await this.$refs.formUI.submit()
+      savePurchaseOrderController(submitData).then(res=>{
+       if (res.code===200){
+         const successMsg = this.$t('merchant.statusChangeSuccess', { action: "采购订单新增" });
+         this.$modal.msgSuccess(successMsg);
+         this.$router.push({path: "/material/order/index"});
+       }
+      })
     },
-    handleSubmit() {},
   },
 };
 </script>

src/views/material/order/formUI.vue

@@ -2,61 +2,67 @@
   <div>
     <Paragraph title="基础信息">
       <template>
-        <el-form ref="form" size="mini" >
+        <el-form ref="form" size="mini"  :model="form">
           <el-row :gutter="20">
             <el-col :span="6">
-              <el-form-item label="采购订单号" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="采购订单号" prop="orderNo" required>
+                <el-input v-model="form.orderNo" placeholder="输入采购订单号"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="采购方" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="采购方" prop="puchaseSource" required>
+                <el-input v-model="form.puchaseSource" placeholder="输入采购方"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="联系电话" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="联系电话" prop="contactWay" required>
+                <el-input v-model="form.contactWay" placeholder="输入联系电话"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="负责人" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="负责人" prop="responsible" required>
+                <el-input v-model="form.responsible" placeholder="输入负责人"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="商品采购总数" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="商品采购总数" prop="totalQuantity" required>
+                <el-input v-model="form.totalQuantity" placeholder="输入商品采购总数"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="采购总斤数" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="采购总KG数" prop="totalWeight" required>
+                <el-input v-model="form.totalWeight" placeholder="输入采购总KG数"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="总价" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="总价" prop="totalPrice" required>
+                <el-input v-model="form.totalPrice" placeholder="输入总价"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="支付金额" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="支付金额" prop="actualPrice" required>
+                <el-input v-model="form.actualPrice" placeholder="输入支付金额"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="支付方式" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="支付方式" prop="purchaseType" required>
+                <el-input v-model="form.purchaseType" placeholder="输入支付方式"></el-input>
               </el-form-item>
             </el-col>
             <el-col :span="6">
-              <el-form-item label="采购时间" prop="name" required>
-                <el-input v-model="form.name"></el-input>
+              <el-form-item label="采购时间" prop="purchaseTime" required>
+                <el-date-picker
+                  v-model="form.purchaseTime"
+                  format="yyyy-MM-dd HH:mm:ss"
+                  value-format="yyyy-MM-dd HH:mm:ss"
+                  type="datetime"
+                  placeholder="选择日期时间">
+                </el-date-picker>
               </el-form-item>
             </el-col>
             <el-col :span="24">
-              <el-form-item label="发票截图" prop="name" required>
-                <ImageUpload :isShowTip="false" />
+              <el-form-item label="发票截图" prop="fileId">
+                <ImageUpload @input="input" :isShowTip="false" />
               </el-form-item>
             </el-col>
           </el-row>
@@ -65,16 +71,86 @@
     </Paragraph>
     <Paragraph title="商品信息">
       <template>
-        <el-button type="primary" @click="handleAddGoods">增加商品</el-button>
-        <p></p>
-        <el-table>
-          <el-table-column label="商品名称" prop="1" min-width="80" />
-          <el-table-column label="单价(元)" prop="3" min-width="80" />
-          <el-table-column label="总数" prop="2" min-width="80" />
-          <el-table-column label="总价(元)" prop="4" min-width="80" />
-          <el-table-column label="操作" align="left" width="130" fixed="right">
-            <template slot-scope="scope">
-              <el-button type="text" size="mini">删除</el-button>
+        <div style="display: flex;align-items: center">
+          <el-button type="primary" @click="handleAddGoods">增加商品</el-button>
+          <div style="display: flex;margin-left: auto">总价：<span style="font-size: 20px;color: #ff0000">￥{{totalAmount}}</span></div>
+        </div>
+
+        <el-table :data="selectedItems" style="width: 100%">
+          <!-- 商品名称 -->
+          <el-table-column label="商品名称" prop="materialName" min-width="120"></el-table-column>
+          <!-- 单价（数字输入） -->
+          <el-table-column label="单价(元)" min-width="120">
+            <template v-slot="scope">
+              <div>
+                <el-input-number
+                  v-if="scope.row.editing.status"
+                  v-model="scope.row.editUnitPrice"
+                  :precision="2"
+                  :min="0"
+                  size="mini"
+                  controls-position="right"
+                />
+                <span v-else>¥ {{ scope.row.unitPrice.toFixed(2) }}</span>
+              </div>
+            </template>
+          </el-table-column>
+
+          <!-- 总数（数字输入） -->
+          <el-table-column label="总数" min-width="100">
+            <template v-slot="scope">
+              <div>
+                <el-input-number
+                  v-if="scope.row.editing.status"
+                  v-model="scope.row.editTotalQuantity"
+                  :min="1"
+                  :max="9999"
+                  size="mini"
+                  controls-position="right"
+                />
+                <span v-else>{{ scope.row.totalQuantity }}</span>
+              </div>
+            </template>
+          </el-table-column>
+          <!-- 总价（自动计算） -->
+          <el-table-column label="总价" min-width="120">
+            <template v-slot="scope">
+              ¥ {{ (scope.row.totalQuantity * scope.row.unitPrice).toFixed(2) }}
+            </template>
+          </el-table-column>
+          <!-- 操作列 -->
+          <el-table-column label="操作" width="150" fixed="right">
+            <template v-slot="scope">
+              <el-button
+                v-if="!scope.row.editing.status"
+                type="text"
+                size="mini"
+                @click="startRowEdit(scope.row)">
+                编辑
+              </el-button>
+              <el-button
+                v-if="!scope.row.editing.status"
+                type="text"
+                size="mini"
+                @click="deleteSelectedItems(scope.row)">
+                删除
+              </el-button>
+              <div v-else>
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="saveRowEdit(scope.row)"
+                >
+                  保存
+                </el-button>
+                <el-button
+                  type="text"
+                  size="mini"
+                  @click="cancelRowEdit(scope.row)"
+                >
+                  取消
+                </el-button>
+              </div>
             </template>
           </el-table-column>
         </el-table>
@@ -85,13 +161,20 @@
       title="材料列表"
       :visible.sync="materialDialog"
       class="common-dialog"
-      width="80%"
-    >
-      <PagingTable>
+      width="80%">
+      <PagingTable :fetch="getList">
         <el-table-column label="序号" prop="id" min-width="80" />
-        <el-table-column label="原材料名称" prop="1" min-width="80" />
-        <el-table-column label="规格" prop="3" min-width="80" />
-        <el-table-column label="原材料编号" prop="2" min-width="80" />
+        <el-table-column label="原材料名称" prop="name" min-width="80" />
+        <el-table-column label="规格" prop="specification" min-width="80" />
+        <el-table-column label="原材料编号" prop="materialNo" min-width="80" />
+        <el-table-column
+          fixed="right"
+          label="操作"
+          width="100">
+          <template slot-scope="scope">
+            <el-button v-if="!isSelected(scope.row.id)" @click="addMaterial(scope.row)" type="text" size="small"><i class="el-icon-plus"></i>选择材料</el-button>
+          </template>
+        </el-table-column>
       </PagingTable>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="close">关闭</el-button>
@@ -102,6 +185,8 @@
 <script>
 import Paragraph from "@/components/Paragraph";
 import PagingTable from "@/components/PagingTable";
+import {getMaterialList} from "@/api/material";
+
 export default {
   name: "FormUI",
   components: { Paragraph, PagingTable },
@@ -118,8 +203,16 @@ export default {
   data() {
     return {
       materialDialog: false,
+      // 目标集合（存放被选中的数据）
+      selectedItems: [],
     };
   },
+  computed: {
+    totalAmount() {
+      var amount = this.selectedItems.reduce((sum, item) => sum + (item.totalQuantity * item.unitPrice), 0);
+      return amount.toFixed(2)
+    }
+  },
   methods: {
     handleAddGoods() {
       this.materialDialog = true;
@@ -127,6 +220,97 @@ export default {
     close() {
       this.materialDialog = false;
     },
+    async getList(queryParams) {
+      queryParams.pageNo = queryParams.page
+      var data = await getMaterialList(queryParams)
+      return {list:data.data.data,total:data.data.total}
+    },
+    addMaterial(item){
+      console.log(item)
+      // 检查是否已存在（根据唯一ID判断）
+      const isExist = this.selectedItems.some(
+        selected => selected.id === item.id
+      );
+      if (isExist) {
+        this.$message.warning("该商品已存在，不能重复添加！");
+        return;
+      }
+      var materialItem = {
+        materialId:item.id,
+        materialName:item.name,
+        totalQuantity:0,
+        unitPrice:0,
+        editing: {
+          status: false,
+          field: null,
+          original: null
+        },
+        editMaterialName: '',
+        editUnitPrice: 0,
+        editTotalQuantity: 0
+      }
+      console.log(materialItem)
+      // 深拷贝对象避免引用问题
+      const clonedItem = JSON.parse(JSON.stringify(materialItem));
+      this.selectedItems.push(clonedItem);
+    },
+    deleteSelectedItems(item){
+      this.selectedItems = this.selectedItems.filter(
+        s => s.materialId !== item.materialId
+      );
+    },
+    submit(){
+      return new Promise((resolve, reject) => {
+        this.$refs.form.validate((valid) => {
+          if (valid) {
+            this.form.orderItemList = this.selectedItems
+            resolve(this.form);
+          } else {
+            reject();
+          }
+        });
+      });
+    },
+    input(urls){
+      this.form.fileId = urls
+    },
+    // 初始化行编辑状态
+    initRowEdit(row) {
+      this.$set(row, 'editing', {
+        status: false,
+        field: null,
+        original: {
+          materialName: row.materialName,
+          unitPrice: row.unitPrice,
+          totalQuantity: row.totalQuantity
+        }
+      })
+      this.$set(row, 'editMaterialName', row.materialName)
+      this.$set(row, 'editUnitPrice', row.unitPrice)
+      this.$set(row, 'editTotalQuantity', row.totalQuantity)
+    },
+    // 批量编辑模式
+    startRowEdit(row) {
+      this.initRowEdit(row)
+      row.editing.status = true
+    },
+
+    // 保存整行修改
+    saveRowEdit(row) {
+      row.unitPrice = parseFloat(row.editUnitPrice)
+      row.totalQuantity = parseInt(row.editTotalQuantity)
+      row.editing.status = false
+      this.$message.success('修改已保存')
+    },
+    // 取消修改
+    cancelRowEdit(row) {
+      row.unitPrice = row.editing.original.unitPrice
+      row.totalQuantity = row.editing.original.totalQuantity
+      row.editing.status = false
+    },
+    isSelected(id) {
+      return this.selectedItems.some(item => item.materialId === id);
+    },
   },
 };
 </script>

src/views/material/order/index.vue

@@ -1,23 +1,24 @@
 <template>
   <div>
-    <Page>
+    <Page :fetch="getList">
       <template #search="{ form, search }">
-        <el-form-item label="订单编号" prop="name">
+        <el-form-item label="订单编号" prop="orderNo">
           <el-input
-            v-model="form.name"
-            placeholder="请输入名称"
+            v-model="form.orderNo"
+            placeholder="请输入订单编号"
             clearable
             size="small"
             @keyup.enter.native="search"
           />
         </el-form-item>
-        <el-form-item label="时间" prop="time">
-          <el-input
-            v-model="form.status"
-            placeholder="请输入订单号"
-            clearable
-            @keyup.enter.native="search"
-          />
+        <el-form-item label="采购时间" prop="purchaseTime">
+          <el-date-picker
+            v-model="form.purchaseTime"
+            type="date"
+            placeholder="选择日期"
+            value-format="yyyy-MM-dd"
+            format="yyyy - MM - dd">
+          </el-date-picker>
         </el-form-item>
       </template>
       <template #extendButton>
@@ -26,19 +27,18 @@
         >
       </template>
       <template #default>
-        <el-table-column label="序号" prop="id" min-width="80" />
-        <el-table-column label="订单编号" prop="1" min-width="80" />
-        <el-table-column label="采购方" prop="3" min-width="80" />
-        <el-table-column label="联系方式" prop="2" min-width="80" />
-        <el-table-column label="负责人" prop="4" min-width="80" />
-        <el-table-column label="商品采购总数" prop="5" min-width="100" />
-        <el-table-column label="采购总斤数" prop="6" min-width="100" />
-        <el-table-column label="总价" prop="7" min-width="80" />
-        <el-table-column label="支付金额" prop="8" min-width="80" />
-        <el-table-column label="支付方式" prop="9" min-width="80" />
-        <el-table-column label="支付金额" prop="10" min-width="80" />
-        <el-table-column label="采购时间" prop="11" min-width="80" />
-        <el-table-column label="录入时间" prop="12" min-width="80" />
+        <el-table-column :show-overflow-tooltip="true" label="序号" prop="id" min-width="80" />
+        <el-table-column :show-overflow-tooltip="true" label="订单编号" prop="orderNo" min-width="80" />
+        <el-table-column label="采购方" prop="puchaseSource" min-width="80" />
+        <el-table-column label="联系方式" prop="contactWay" min-width="120" />
+        <el-table-column label="负责人" prop="responsible" min-width="80" />
+        <el-table-column label="商品采购总数" prop="totalQuantity" min-width="100" />
+        <el-table-column label="采购总kg" prop="totalWeight" min-width="100" />
+        <el-table-column label="总价" prop="totalPrice" min-width="80" />
+        <el-table-column label="支付金额" prop="actualPrice" min-width="80" />
+        <el-table-column label="支付方式" prop="purchaseType" min-width="80" />
+        <el-table-column label="采购时间" prop="purchaseTime" min-width="100" />
+        <el-table-column label="录入时间" prop="createTime" min-width="100" />
         <el-table-column label="操作" align="left" width="130" fixed="right">
           <template slot-scope="scope">
             <el-button size="mini" type="text">详情</el-button>
@@ -53,13 +53,16 @@
 </template>
 <script>
 import Page from "@/components/Page";
+import {getPurchaseOrderList} from "@/api/material";
 export default {
   name: "MaterialOrder",
   components: {
     Page,
   },
   data() {
-    return {};
+    return {
+      form:{}
+    };
   },
   methods: {
     handleAdd() {
@@ -67,6 +70,10 @@ export default {
         path: "/material/order/add",
       });
     },
+   async getList(params){
+     var res = await getPurchaseOrderList(params)
+     return {list:res.data.data,total:res.data.total}
+    }
   },
 };
 </script>