update 压机报工页面

src/components/ReportDialog.vue

@@ -16,6 +16,14 @@
     <!-- :class="{ 'pms-dialog--rotate-down': startLeave }"> -->
     <span slot="title" class="dialog-title">报工预览</span>
 
+    <!-- 面包屑导航 -->
+    <div style="padding: 12px; background: #f7f7f7">
+      <el-breadcrumb separator="/">
+        <el-breadcrumb-item>预报工单</el-breadcrumb-item>
+        <el-breadcrumb-item v-if="mode.includes('form')">编辑</el-breadcrumb-item>
+      </el-breadcrumb>
+    </div>
+
     <transition class="l" mode="out-in">
       <BaseListTable
         v-if="mode.includes('table')"
@@ -25,15 +33,67 @@
         @operate-event="handleOperate"
         :current-page="page"
         :current-size="size" />
-      <form action="#" v-if="mode.includes('form')">
-        <h1>编辑</h1>
-        <el-button type="text" size="small" @click="mode = 'table'">返回</el-button>
-      </form>
+
+      <el-form
+        v-if="mode.includes('form')"
+        ref="dataForm"
+        :model="dataForm"
+        size="small"
+        style="padding: 16px"
+        v-loading="formLoading">
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="订单号" prop="orderCode" :rules="null">
+              <el-input v-model="dataForm.orderCode" disabled placeholder="-" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="订单子号" prop="orderCate" :rules="null">
+              <el-input v-model="dataForm.orderCate" disabled placeholder="-" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <!-- 总量 - 前端计算 -->
+            <el-form-item label="生产总量" prop="qty" :rules="null">
+              <el-input v-model="dataForm.qty" disabled placeholder="-" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="合格砖数量" prop="goodqty" :rules="[$fv.isRequired, $fv.isNumber]">
+              <el-input v-model="dataForm.goodqty" placeholder="请输入合格砖数量" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="报废砖数量" prop="badqty" :rules="[$fv.isRequired, $fv.isNumber]">
+              <el-input v-model="dataForm.badqty" placeholder="请输入报废砖数量" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <!-- 报废率 - 前端计算 -->
+            <el-form-item label="报废率" prop="badratio" :rules="null">
+              <el-input v-model="dataForm.badratio" disabled placeholder="-" />
+            </el-form-item>
+          </el-col>
+        </el-row>
+        <el-row :gutter="20">
+          <el-col :span="8">
+            <el-form-item label="报工班次" prop="team" :rules="null">
+              <el-input v-model="dataForm.team" placeholder="请输入报工班次" />
+            </el-form-item>
+          </el-col>
+          <el-col :span="8" style="padding-top: 32px">
+            <el-button type="primary" size="small" @click="handleSaveEdit">预保存</el-button>
+            <el-button size="small" @click="mode = 'table'">取消</el-button>
+          </el-col>
+        </el-row>
+      </el-form>
     </transition>
 
     <div slot="footer" class="dialog-footer">
       <el-button size="small" @click="close">取消</el-button>
-      <el-button size="small" type="primary" @click="handleConfirm">确定</el-button>
+      <el-button size="small" type="primary" @click="handleConfirm">提交更改</el-button>
     </div>
   </el-dialog>
 </template>
@@ -53,6 +113,18 @@ export default {
       loading: false,
       dataList: [],
       page: 1,
+      dataForm: {
+        id: null,
+        orderCate: null,
+        orderCode: null,
+        qty: null,
+        goodqty: null,
+        badqty: null,
+        badratio: null,
+        team: null,
+      },
+      formLoading: false,
+      dataFormList: [],
       tableProps: [
         { prop: "orderCode", label: "订单号" },
         { prop: "orderCate", label: "订单子号" },
@@ -73,7 +145,7 @@ export default {
           width: 90,
           subcomponent: TableOperaionComponent,
           options: [
-            { name: "edit", label: "编辑", icon: "edit-outline" },
+            { name: "edit", label: "编辑", icon: "edit-outline", emitFull: true },
             // {
             //   name: "delete",
             //   icon: "delete",
@@ -84,6 +156,7 @@ export default {
           ],
         },
       ],
+      currentEditing: null,
     };
   },
   computed: {
@@ -91,6 +164,18 @@ export default {
       return this.dataList.length;
     },
   },
+  watch: {
+    "dataForm.goodqty"(val) {
+      const qty = +val + +this.dataForm.badqty;
+      this.dataForm.qty = qty;
+      this.dataForm.badratio = ((+this.dataForm.badqty / qty) * 100).toFixed(2);
+    },
+    "dataForm.badqty"(val) {
+      const qty = +val + +this.dataForm.goodqty;
+      this.dataForm.qty = qty;
+      this.dataForm.badratio = ((+val / qty) * 100).toFixed(2);
+    },
+  },
   methods: {
     async init() {
       this.visible = true;
@@ -100,32 +185,87 @@ export default {
         ids: this.ids,
       });
       if (res.code === 0) {
-        this.dataList = res.data.map((item) => ({
+        this.dataList = res.data.map((item, index) => ({
           ...item,
           qty: item.goodqty + item.badqty,
+          // 该 __LOCAL_INDEX 用于更新本地缓存数据
+          __LOCAL_INDEX: index,
         }));
-        console.log("this.datalist", this.dataList);
       }
       this.loading = false;
     },
+
     close() {
       this.visible = false;
     },
+
     handleOperate({ type, data }) {
       console.log("payload", type, data);
       switch (type) {
         case "edit":
           this.mode = "form";
+          this.currentEditing = data.__LOCAL_INDEX;
+          const { id, orderCate, orderCode, qty, goodqty, badqty, badratio, team } = data;
+          this.dataForm = {
+            id,
+            orderCate,
+            orderCode,
+            qty,
+            goodqty,
+            badqty,
+            badratio,
+            team,
+          };
           break;
       }
     },
-    handleConfirm() {},
+
+    async handleConfirm() {
+      this.loading = true;
+      const { data: res } = await this.$http.post("/pms/workReport/pressReport", {
+        datas: this.dataList,
+        ids: this.ids,
+      });
+      this.loading = false;
+      if (res.code === 0) {
+        this.$message.success("提交成功");
+        this.$emit('refresh-list')
+        this.close();
+      }
+    },
+
+    // 本地缓存编辑过的数据，保存时一并提交给服务器
+    handleSaveEdit() {
+      Object.keys(this.dataForm).forEach((key) => {
+        this.dataList[this.currentEditing][key] = this.dataForm[key];
+      });
+      this.mode = "table";
+      this.$nextTick(() => {
+        this.clearDataForm();
+      });
+    },
+
+    // 清空输入数据
+    clearDataForm() {
+      this.currentEditing = null;
+      this.dataForm = {
+        id: null,
+        orderCate: null,
+        orderCode: null,
+        qty: null,
+        goodqty: null,
+        badqty: null,
+        badratio: null,
+        team: null,
+      };
+    },
   },
 };
 </script>
 
 <style scoped>
 .dialog-just-form >>> .dialog-title {
+  color: #000;
 }
 
 .dialog-just-form >>> .el-dialog__body {

src/main.js

@@ -23,7 +23,8 @@ import { hasPermission, getDictLabel } from '@/utils'
 import cloneDeep from 'lodash/cloneDeep'
 // main.js
 import myComponents from 'code-brick-zj'
-
+// 表单验证
+import { formValidateRules } from '@/utils/validate'
 
 // import mocks from './mocks'
 
@@ -44,6 +45,7 @@ Vue.use(myComponents)
 Vue.prototype.$http = http
 Vue.prototype.$hasPermission = hasPermission
 Vue.prototype.$getDictLabel = getDictLabel
+Vue.prototype.$fv = formValidateRules
 
 // 保存整站vuex本地储存初始状态
 window.SITE_CONFIG['storeState'] = cloneDeep(store.state)

src/utils/validate.js

@@ -2,30 +2,47 @@
  * 邮箱
  * @param {*} s
  */
-export function isEmail (s) {
-  return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s)
+export function isEmail(s) {
+  return /^([a-zA-Z0-9._-])+@([a-zA-Z0-9_-])+((.[a-zA-Z0-9_-]{2,3}){1,2})$/.test(s);
 }
 
 /**
  * 手机号码
  * @param {*} s
  */
-export function isMobile (s) {
-  return /^1[0-9]{10}$/.test(s)
+export function isMobile(s) {
+  return /^1[0-9]{10}$/.test(s);
 }
 
 /**
  * 电话号码
  * @param {*} s
  */
-export function isPhone (s) {
-  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s)
+export function isPhone(s) {
+  return /^([0-9]{3,4}-)?[0-9]{7,8}$/.test(s);
 }
 
 /**
  * URL地址
  * @param {*} s
  */
-export function isURL (s) {
-  return /^http[s]?:\/\/.*/.test(s)
+export function isURL(s) {
+  return /^http[s]?:\/\/.*/.test(s);
 }
+
+/**
+ * 表单验证
+ */
+export const formValidateRules = {
+  isRequired: {
+    required: true,
+    message: "必填项",
+    trigger: "blur",
+  },
+  isNumber: {
+    type: "number",
+    message: "请输入正确的数字类型",
+    trigger: "blur",
+    transform: (val) => Number(val),
+  },
+};

src/views/atomViews/ListViewWithHead.vue

@@ -68,6 +68,7 @@
       ref="car-report-dialog"
       v-if="carReportDialogVisible"
       @destroy="carReportDialog = false"
+      @refresh-list="getList"
       :ids="tableSelectedIds" />
   </div>
 </template>