From 70c352e97f96a9aaa018a9fec6791d215161ee2c Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Tue, 6 May 2025 17:10:46 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E6=95=B0=E6=8D=AE=E9=87=8D?=
 =?UTF-8?q?=E7=BD=AE=E6=97=A0=E6=95=88=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/GuipInput.vue         |  21 ++---
 src/components/GuipSelect.vue        |  10 +--
 src/views/super/Ranking/Purchase.vue | 145 +++++++++++++++++------------------
 3 files changed, 89 insertions(+), 87 deletions(-)

diff --git a/src/components/GuipInput.vue b/src/components/GuipInput.vue
index f7aa4d1..a20eb62 100644
--- a/src/components/GuipInput.vue
+++ b/src/components/GuipInput.vue
@@ -14,9 +14,9 @@
       :show-word-limit="showWordLimit"
       @input="$emit('input', $event)"
       @change="$emit('change', $event)"
-      @blur="$emit('blur', value)"
-      @focus="$emit('focus', value)"
-      v-model="value">
+      @blur="$emit('blur', inputValue)"
+      @focus="$emit('focus', inputValue)"
+      v-model="inputValue">
       <!-- 自定义前面小图标 -->
       <template v-slot:prepend>
         <slot name="prependshow"></slot>
@@ -46,12 +46,12 @@
  <script>
  export default {
    name: 'GuipInput',
-   props:['styleObject','disabled','defaultValue','placeholder',
+   props:['value','styleObject','disabled','defaultValue','placeholder',
    'maxlength','minLength','clear','width','height','showWordLimit',
    'label','type','prop','rules','column','addClass','desc','unit'],
    data() {
        return {
-           value: '',
+        inputValue: '',
            maxlength1: '',
            minLength1: 0,
            style:{
@@ -62,15 +62,18 @@
        }
    },
    watch: { // 监听外部传来的 value prop 的变化，以便同步到内部状态 inputValue 上（可选）
-    defaultValue(newVal) {
-      console.log(newVal,'newVal');
-      this.value = newVal;
+    // defaultValue(newVal) {
+    //   console.log(newVal,'newVal');
+    //   this.inputValue = newVal;
+    // },
+    value(newVal){
+      this.inputValue = newVal;
     }
   },
    created(){
     // 默认值赋值
     if(this.defaultValue != null){
-      this.value = this.defaultValue;
+      this.inputValue = this.defaultValue;
     }
     // 默认提示语
     if(this.placeholder){
diff --git a/src/components/GuipSelect.vue b/src/components/GuipSelect.vue
index 97733b5..dfecbbf 100644
--- a/src/components/GuipSelect.vue
+++ b/src/components/GuipSelect.vue
@@ -16,22 +16,22 @@
 <script>
 export default {
   name: 'GuipTextarea',
-  props: ['options', 'styleObject', 'disabled', 'defaultValue', 'placeholder',
+  props: ['value','options', 'styleObject', 'disabled', 'defaultValue', 'placeholder',
     'width', 'height', 'label', 'type', 'prop', 'rules', 'column', 'addClass', 'desc'],
   data() {
     return {
       selectedValue: '',
       style: {},
-      placeholder1: '请选择'
+      placeholder1: '请选择',
     }
   },
   watch: {
     value(newVal) {
       this.selectedValue = newVal;
     },
-    defaultValue(newVal) {
-      this.selectedValue = newVal;
-    }
+    // defaultValue(newVal) {
+    //   this.selectedValue = newVal;
+    // }
   },
   mounted() {
     // 默认值赋值
diff --git a/src/views/super/Ranking/Purchase.vue b/src/views/super/Ranking/Purchase.vue
index df14d79..6d6c6ca 100644
--- a/src/views/super/Ranking/Purchase.vue
+++ b/src/views/super/Ranking/Purchase.vue
@@ -5,34 +5,35 @@
             <el-button type="primary" @click="openDialog">新增</el-button>
 
             <GuipDialog :dialogVisible="dialogVisible" :title="dialogTitle" :show-close-button="false"
-                        :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
-                        @close="handleClose"
-                        @dialogVisibleChange="dialogVisibleChange">
+                :show-cancel-button="showCancelButton" @confirm="handleConfirm" @cancel="handleCancel"
+                @close="handleClose" @dialogVisibleChange="dialogVisibleChange">
                 <el-form :model="form" class="el-row demo-ruleForm" ref="formRef">
-                    <el-form-item label="检测类型" prop="type">
-                        <GuipSelect v-model="form.type" :options="type2nameOptions"/>
-                    </el-form-item>
-                    <el-form-item label="采购单价" prop="type" label-width="73px">
+                    <!-- 组件已经封装了  el-form-item  没有特殊需求，直接在组件上传prop label 就可以实现效果-->
+                    <GuipSelect v-model="form.type" prop="type" label="检测类型" :options="type2nameOptions" />
+                    <el-form-item label="采购单价" label-width="73px">
                         <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
-                            <GuipInput v-model="form.unit_price" style="flex: 1;"/>
+                            <GuipInput v-model="form.unit_price" prop="unit_price" />
                             <span>元 /</span>
-                            <GuipInput v-model="form.unit_num" style="flex: 1;"/>
+                            <GuipInput v-model="form.unit_num" prop="unit_num" style="flex: 1;" />
                             <span>字（篇/页）</span>
                         </div>
                     </el-form-item>
+                    <!-- <div class="flex-between" style="gap: 8px;">
+                        <GuipInput label="采购单价" v-model="form.unit_price" prop="unit_price" unit="元"/>
+                        <GuipInput v-model="form.unit_num" prop="unit_num" style="flex: 1;" unit="字（篇/页）"/>
+                    </div> -->
 
                     <template v-if="type != 'purchase'">
-                        <el-form-item label="阶段成本" prop="type" label-width="73px">
+                        <el-form-item label="阶段成本" prop="cost" label-width="73px">
                             <div style="display: flex; align-items: center; gap: 8px; width: 100%;">
-                                <GuipInput v-model="form.cost" style="flex: 1;"/>
+                                <GuipInput v-model="form.cost" style="flex: 1;" />
                                 <span>元</span>
                             </div>
                         </el-form-item>
                         <el-form-item label="起止日期" prop="date" label-width="73px">
                             <el-date-picker v-model="form.date" type="daterange" range-separator="至"
-                                            start-placeholder="开始日期"
-                                            end-placeholder="结束日期" value-format="yyyy-MM-dd"
-                                            style="width: 100%;">
+                                start-placeholder="开始日期" end-placeholder="结束日期" value-format="yyyy-MM-dd"
+                                style="width: 100%;">
                             </el-date-picker>
                         </el-form-item>
                     </template>
@@ -46,7 +47,7 @@
                         <el-table-column prop="type">
                             <template slot="header">
                                 <GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
-                                            defaultValue="全部检测类型" @change="changeSelectType"/>
+                                    defaultValue="全部检测类型" @change="changeSelectType" />
                             </template>
 
                             <template slot-scope="scope">
@@ -72,7 +73,7 @@
                         <el-table-column prop="type">
                             <template slot="header">
                                 <GuipSelect class="custom-select" v-model="chktype" :options="type2filterOptions"
-                                            defaultValue="全部检测类型" @change="changeSelectType"/>
+                                    defaultValue="全部检测类型" @change="changeSelectType" />
                             </template>
 
                             <template slot-scope="scope">
@@ -82,7 +83,7 @@
 
                         <el-table-column label="采购价">
                             <template slot-scope="scope">
-                                <template v-if="scope.row.unit_price>0">
+                                <template v-if="scope.row.unit_price > 0">
                                     单价：{{ scope.row.unit_price }} 元 / {{
                                         scope.row.unit_num == 1 ? '篇' : scope.row.unit_num + '字' }}
                                 </template>
@@ -100,22 +101,16 @@
 
                         <el-table-column label="操作" width="200">
                             <template slot-scope="scope">
-                                <a @click="editStagePurchase(scope.row)"
-                                   style="color: #006aff;cursor: pointer;">编辑</a>
+                                <a @click="editStagePurchase(scope.row)" style="color: #006aff;cursor: pointer;">编辑</a>
                                 <a v-if="scope.row.is_sync == 0" @click="syncStagePurchase(scope.row)"
-                                   style="color: #006aff;margin-left: 20px;cursor: pointer;">同步</a>
+                                    style="color: #006aff;margin-left: 20px;cursor: pointer;">同步</a>
                             </template>
                         </el-table-column>
                     </template>
                 </el-table>
 
-                <el-pagination background
-                               @size-change='handleSizeChange'
-                               @current-change='handleCurrentChange'
-                               :current-page="currentPage"
-                               :page-size=pageSize
-                               layout="prev, pager, next,jumper"
-                               :total="total">
+                <el-pagination background @size-change='handleSizeChange' @current-change='handleCurrentChange'
+                    :current-page="currentPage" :page-size=pageSize layout="prev, pager, next,jumper" :total="total">
                 </el-pagination>
             </el-form>
         </div>
@@ -150,8 +145,9 @@ export default {
     },
     data() {
         return {
+            test: '00000',
             id: 0,
-            chktype: 0,
+            chktype: '0',
             currentPage: 1,    //当前页
             pageSize: 20,   //每页的容量
             total: 0,   //列表总数
@@ -178,22 +174,22 @@ export default {
     },
     computed: {
         type2nameOptions() {
-            if(this.type2name.length == 0) return true
+            if (this.type2name.length == 0) return true
 
             return Object.entries(this.type2name).map(([value, label]) => ({
                 label,
-                value: Number(value)  // 如果你需要 value 是数字
+                value: String(value)  // 如果你需要 value 是数字
             }));
         },
         type2filterOptions() {
-            if(this.type2name.length == 0) return true
+            if (this.type2name.length == 0) return true
 
             let options = Object.entries(this.type2name).map(([value, label]) => ({
                 label,
-                value: Number(value)  // 如果你需要 value 是数字
+                value: String(value)  // 如果你需要 value 是数字
             }));
 
-            return [{ label: '全部检测类型', value: '' }, ...options];
+            return [{ label: '全部检测类型', value: '0' }, ...options];
         }
     },
     watch: {
@@ -266,45 +262,41 @@ export default {
             this.init()
         },
         openDialog() {
-            this.form = {
-                id: '',
-                type: '',
-                unit_price: '',
-                unit_num: '',
-                cost: '',
-                date: '',
-                start_date: '',
-                end_date: '',
-            }
             this.dialogVisible = true;
+            // 重置数据
+            this.$nextTick(() => {
+                this.$refs.formRef.resetFields();
+            });
         },  // 确认按钮事件
         handleConfirm() {
             const that = this
-            if (!that.form.type) {
+            // 避免打开弹框，重置数据时，新添加的数据被清空，重新拷贝一份  或者 添加数据后，拉取新数据
+            let form = JSON.parse(JSON.stringify(that.form))
+            if (!form.type) {
                 this.$message.warning('请选择检测类型');
                 return
             }
             if (that.type == 'purchase') {
-                if (!that.form.unit_price || !that.form.unit_num) {
+                if (!form.unit_price || !form.unit_num) {
                     this.$message.warning('请输入采购单价');
                     return
                 }
 
                 this.$http('POST', '/supernew/ajax_save_purchase', {
-                    id: that.form.id,
-                    type: that.form.type,
-                    unit_price: that.form.unit_price,
-                    unit_num: that.form.unit_num,
+                    id: form.id,
+                    type: form.type,
+                    unit_price: form.unit_price,
+                    unit_num: form.unit_num,
                 }).then(response => {
                     this.$nextTick(() => {
                         if (!response.status) {
                             this.$message.warning(response.info);
                         } else {
-                            if(that.form.id > 0){
-                                that.$set(this.tableData, this.tableData.findIndex(item => item.id === that.form.id), {...that.form});
-                            }else{
-                                that.form.id = response.data
-                                that.tableData.unshift(that.form);
+                            if (form.id > 0) {
+                                that.$set(this.tableData, this.tableData.findIndex(item => item.id === form.id), { ...form });
+                            } else {
+                                form.id = response.data
+                                that.tableData.unshift(form);
                             }
                         }
                         this.dialogVisible = false;
@@ -314,35 +306,35 @@ export default {
                     this.dialogVisible = false;
                 })
             } else {
-                if ((!that.form.unit_price || !that.form.unit_num) && !that.form.cost) {
+                if ((!form.unit_price || !form.unit_num) && !form.cost) {
                     this.$message.warning('请输入采购单价或阶段成本');
                     return
                 }
 
-                if (!that.form.start_date || !that.form.end_date) {
+                if (!form.start_date || !form.end_date) {
                     this.$message.warning('请选择起止日期');
                     return
                 }
 
                 this.$http('POST', '/supernew/ajax_save_stage_purchase', {
-                    id: that.form.id,
-                    type: that.form.type,
-                    unit_price: that.form.unit_price,
-                    unit_num: that.form.unit_num,
-                    cost: that.form.cost,
-                    sdate: that.form.start_date,
-                    edate: that.form.end_date,
+                    id: form.id,
+                    type: form.type,
+                    unit_price: form.unit_price,
+                    unit_num: form.unit_num,
+                    cost: form.cost,
+                    sdate: form.start_date,
+                    edate: form.end_date,
                 }).then(response => {
                     this.$nextTick(() => {
                         if (!response.status) {
                             this.$message.warning(response.info);
                         } else {
-                            if(that.form.id > 0){
-                                that.$set(this.tableData, this.tableData.findIndex(item => item.id === that.form.id), {...that.form});
-                            }else{
-                                that.form.id = response.data
-                                that.form.is_sync = 0
-                                that.tableData.unshift(that.form);
+                            if (form.id > 0) {
+                                that.$set(this.tableData, this.tableData.findIndex(item => item.id === form.id), { ...form });
+                            } else {
+                                form.id = response.data
+                                form.is_sync = 0
+                                that.tableData.unshift(form);
                             }
                         }
                         this.dialogVisible = false;
@@ -374,13 +366,20 @@ export default {
             return `${Y}-${M}-${D}`;
         },
         editPurchase(row) {
-            this.form = {...row};
             this.dialogVisible = true;
+            this.$nextTick(() => {
+                this.form = { ...row };
+                // 如果需要强制更新视图
+                this.$forceUpdate();
+            })
         },
         editStagePurchase(row) {
-            this.form = {...row};
-            this.form.date = [row.start_date, row.end_date]
             this.dialogVisible = true;
+            this.$nextTick(()=>{
+                this.form = { ...row };
+                this.form.date = [row.start_date, row.end_date]
+                this.$forceUpdate();
+            })
         },
         syncStagePurchase(row) {
             this.$http('POST', '/supernew/ajax_sync_order_cost', {
@@ -401,6 +400,6 @@ export default {
 </script>
 <style scoped lang="scss">
 .custom-select {
-  width: 200px;
+    width: 200px;
 }
 </style>
\ No newline at end of file