办公物品修改

src/views/material/officeSupply.vue

@@ -1,57 +1,57 @@
 <template>
   <div class="app-container">
     <div class="query-container">
-    <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
-      <el-form-item prop="officeSupplyName">
-        <el-input
-          v-model="queryParams.officeSupplyName"
-          placeholder="请输入物品名称"
-          clearable
-          style="width: 240px"
-        />
-      </el-form-item>
-      <el-form-item label="只看自己" prop="self">
-        <el-switch v-model="queryParams.self"></el-switch>
-      </el-form-item>
-      <el-form-item prop="month">
-        <el-date-picker
-          v-model="queryParams.month"
-          type="month"
-          value-format="yyyy-MM"
-          placeholder="需求月份"
-          clearable>
-        </el-date-picker>
-      </el-form-item>
+      <el-form :model="queryParams" ref="queryForm" size="mini" :inline="true">
+        <el-form-item prop="officeSupplyName">
+          <el-input
+            v-model="queryParams.officeSupplyName"
+            placeholder="请输入物品名称"
+            clearable
+            style="width: 240px"
+          />
+        </el-form-item>
+        <el-form-item label="只看自己" prop="self">
+          <el-switch v-model="queryParams.self"></el-switch>
+        </el-form-item>
+        <el-form-item prop="month">
+          <el-date-picker
+            v-model="queryParams.month"
+            type="month"
+            value-format="yyyy-MM"
+            placeholder="需求月份"
+            clearable>
+          </el-date-picker>
+        </el-form-item>
 
-      <el-form-item>
-        <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
-        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
-      </el-form-item>
-    </el-form>
+        <el-form-item>
+          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+        </el-form-item>
+      </el-form>
 
-    <el-row :gutter="10" style="margin-bottom: 8px">
-      <el-col :span="1.5">
-        <el-button
-          type="primary"
-          plain
-          icon="el-icon-plus"
-          size="mini"
-          @click="handleAdd"
-          v-hasPermi="['material:office:add']"
-        >新增
-        </el-button>
-      </el-col>
-      <el-col :span="1.5">
-        <el-button
-          plain
-          icon="el-icon-download"
-          size="mini"
-          @click="handleExport"
-          v-hasPermi="['material:office:export']"
-        >导出
-        </el-button>
-      </el-col>
-    </el-row>
+      <el-row :gutter="10" style="margin-bottom: 8px">
+        <el-col :span="1.5">
+          <el-button
+            type="primary"
+            plain
+            icon="el-icon-plus"
+            size="mini"
+            @click="handleAdd"
+            v-hasPermi="['material:office:add']"
+          >新增
+          </el-button>
+        </el-col>
+        <el-col :span="1.5">
+          <el-button
+            plain
+            icon="el-icon-download"
+            size="mini"
+            @click="handleExport"
+            v-hasPermi="['material:office:export']"
+          >导出
+          </el-button>
+        </el-col>
+      </el-row>
     </div>
 
     <el-table :data="officeSupplyList"
@@ -109,7 +109,7 @@
       <el-form ref="addForm" :model="addForm" :rules="rules" size="mini" inline>
         <el-row>
           <el-col :span="22">
-            <el-form-item label="需求月份">
+            <el-form-item label="需求月份" prop="month">
               <el-date-picker
                 v-model="addForm.month"
                 type="month"
@@ -129,26 +129,52 @@
       </el-form>
       <el-table :data="addList" class="add-table" border size="mini">
         <el-table-column label="物品名称" prop="officeSupplyName">
+          <template slot="header" slot-scope="scope">
+            <span style="color: red">*</span><span>物品名称</span>
+          </template>
           <template slot-scope="scope">
             <el-input v-model="scope.row.officeSupplyName" size="mini" placeholder="请输入物品名称"/>
           </template>
         </el-table-column>
         <el-table-column label="规格/货号" prop="specification">
+          <template slot="header" slot-scope="scope">
+            <span style="color: red">*</span><span>规格/货号</span>
+          </template>
           <template slot-scope="scope">
             <el-input v-model="scope.row.specification" size="mini" placeholder="请输入规格/货号"/>
           </template>
         </el-table-column>
         <el-table-column label="单位" prop="unit" width="120px">
+          <template slot="header" slot-scope="scope">
+            <span style="color: red">*</span><span>单位</span>
+          </template>
           <template slot-scope="scope">
-            <el-input v-model="scope.row.unit" size="mini" placeholder="请输入单位"/>
+            <el-select
+              v-model="scope.row.unit"
+              filterable
+              allow-create
+              default-first-option
+              style="width: 100%">
+              <el-option v-for="item in unitOptions"
+                         :key="item"
+                         :label="item"
+                         :value="item">
+              </el-option>
+            </el-select>
           </template>
         </el-table-column>
         <el-table-column label="价格" prop="price" width="120px">
+          <template slot="header" slot-scope="scope">
+            <span style="color: red">*</span><span>价格</span>
+          </template>
           <template slot-scope="scope">
             <el-input v-model="scope.row.price" size="mini" placeholder="请输入价格"/>
           </template>
         </el-table-column>
         <el-table-column label="数量" prop="num" width="100px">
+          <template slot="header" slot-scope="scope">
+            <span style="color: red">*</span><span>数量</span>
+          </template>
           <template slot-scope="scope">
             <el-input-number v-model="scope.row.num" size="mini" controls-position="right" :min="0"
                              placeholder="请输入数量" style="width: 100%"/>
@@ -179,17 +205,38 @@
     <el-dialog title="修改" :visible.sync="editOpen" @close="dialogClose" width="500px" append-to-body
                :close-on-click-modal="false">
       <el-form ref="editForm" :model="editForm" :rules="rules" size="mini" label-width="100px">
+        <el-form-item label="需求月份" prop="month">
+          <el-date-picker
+            v-model="editForm.month"
+            type="month"
+            value-format="yyyy-MM"
+            placeholder="选择月份"
+            :picker-options="pickerOptions"
+            clearable>
+          </el-date-picker>
+        </el-form-item>
         <el-form-item label="物品名称" prop="officeSupplyName">
-          <el-input v-model="editForm.officeSupplyName" placeholder="请输入物品名称" :disabled="editForm.monthOrWeek==='2'"/>
+          <el-input v-model="editForm.officeSupplyName" placeholder="请输入物品名称"/>
         </el-form-item>
         <el-form-item label="规格/货号" prop="specification">
-          <el-input v-model="editForm.specification" placeholder="请输入规格/货号" :disabled="editForm.monthOrWeek==='2'"/>
+          <el-input v-model="editForm.specification" placeholder="请输入规格/货号"/>
         </el-form-item>
         <el-form-item label="单位" prop="unit">
-          <el-input v-model="editForm.unit" placeholder="请输入单位" :disabled="editForm.monthOrWeek==='2'"/>
+          <el-select
+            v-model="editForm.unit"
+            filterable
+            allow-create
+            default-first-option
+            style="width: 100%">
+            <el-option v-for="item in unitOptions"
+                       :key="item"
+                       :label="item"
+                       :value="item">
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="价格" prop="price">
-          <el-input v-model="editForm.price" placeholder="请输入价格" :disabled="editForm.monthOrWeek==='2'"/>
+          <el-input v-model="editForm.price" placeholder="请输入价格"/>
         </el-form-item>
         <el-form-item label="数量" prop="num">
           <el-input-number v-model="editForm.num" controls-position="right" :min="0" placeholder="请输入数量"/>
@@ -247,6 +294,7 @@ export default {
       editOpen: false,
       editForm: {
         id: undefined,
+        month: undefined,
         officeSupplyName: undefined,
         specification: undefined,
         unit: undefined,
@@ -256,9 +304,12 @@ export default {
       },
 
       projectList: [],
-
+      unitOptions: ['个', '张', '卷', '支'],
       // 表单校验
       rules: {
+        month: [
+          {required: true, message: "需求月份不能为空", trigger: "change"}
+        ],
         officeSupplyName: [
           {required: true, message: "物料名称不能为空", trigger: "blur"}
         ],
@@ -269,7 +320,7 @@ export default {
           {required: true, message: "品牌/货号不能为空", trigger: "blur"}
         ],
         unit: [
-          {required: true, message: "单位不能为空", trigger: "blur"}
+          {required: true, message: "单位不能为空", trigger: "change"}
         ],
         num: [
           {required: true, message: "数量不能为空", trigger: "blur"}
@@ -413,6 +464,25 @@ export default {
     },
     /** 提交按钮 */
     submitForm() {
+      if (this.addList.length === 0) {
+        return
+      }
+      let checkKeys = ['officeSupplyName', 'specification', 'articleNo', 'unit', 'num']
+      let validFlag = true
+      this.addList.forEach(item => {
+        for (let key in item) {
+          if (checkKeys.indexOf(key) > -1) {
+            if (item[key] === null || item[key] === undefined || item[key] === '' || item[key] === 0) {
+              validFlag = false
+            }
+          }
+        }
+      })
+      if (!validFlag) {
+        this.$message.error("必填项不能为空")
+        return;
+      }
+
       this.$refs["addForm"].validate(valid => {
         if (valid) {
           let data = {

src/views/material/receive.vue

@@ -337,7 +337,19 @@
           <el-input v-model="editForm.factory" placeholder="请输入厂商" :disabled="editForm.monthOrWeek==='2'"/>
         </el-form-item>
         <el-form-item label="单位" prop="unit">
-          <el-input v-model="editForm.unit" placeholder="请输入单位" :disabled="editForm.monthOrWeek==='2'"/>
+          <el-select
+            v-model="editForm.unit"
+            filterable
+            allow-create
+            default-first-option
+            :disabled="editForm.monthOrWeek==='2'"
+            style="width: 100%">
+            <el-option v-for="item in unitOptions"
+                       :key="item"
+                       :label="item"
+                       :value="item">
+            </el-option>
+          </el-select>
         </el-form-item>
         <el-form-item label="价格" prop="price">
           <el-input v-model="editForm.price" placeholder="请输入价格" :disabled="editForm.monthOrWeek==='2'"/>