新增上传提示

src/views/Pricesystem/Price/PriceBill.vue

@@ -78,14 +78,14 @@
             <!-- 新增 -->
             <span
               v-if="value.plus"
-              @click="handlePlus(value, index)"
+              @click="handlePlusVehicle(value, index)"
               class="el_table_operation_span_b"
               >+
             </span>
             <!-- 删除 -->
             <span
               v-if="value.reduce"
-              @click="handleReduce(value, index)"
+              @click="handleReduceVehicle(value, index)"
               class="el_table_operation_span_a"
               >-
             </span>
@@ -99,64 +99,87 @@
     <el-divider content-position="left">品类管理</el-divider>
 
     <template v-for="value in details.form.billTemplateDetail" :key="value.title">
-      <!-- 附加费品类 -->
+      <template v-if="details.form.pickupPricingType.includes(value.code)">
+        <!-- 附加费品类 -->
+        <el-form-item label-width="130px" :label="value.title">
+          <el-input-number
+            v-model="value.pickupMinCostType"
+            style="width: 13vw"
+            :controls="false"
+            :precision="2"
+            :value-on-clear="0"
+            :min="0"
+          />
+        </el-form-item>
+
+        <!-- 附加费品类 -->
+        <el-form-item label-width="130px" :label="value.title">
+          <table class="table" border>
+            <thead>
+              <tr>
+                <th>序号</th>
+                <th style="width: 45%">产品品类</th>
+                <th style="width: 45%">按件计费(元/件)</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr v-for="(item, index) in value.categories">
+                <td>{{ index }}</td>
+                <!-- 品类名称 -->
+                <td>{{ item.goodsName }}</td>
+                <!-- 费用 -->
+                <td>
+                  <el-input-number
+                    v-model="item.pickupMinCostType"
+                    style="width: 13vw"
+                    :controls="false"
+                    :precision="2"
+                    :value-on-clear="0"
+                    :min="0"
+                  />
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </el-form-item>
+      </template>
+    </template>
+    <!-- </template> -->
+
+    <!-- 最低计费 -->
+    <el-divider content-position="left">最低计费</el-divider>
+    <el-form label-width="130px" inline>
       <el-form-item
-        label-width="130px"
-        v-if="details.form.pickupPricingType.includes(value.code)"
-        :label="value.title"
+        label="最低计费价格"
+        prop="pickupMinCostType"
+        :rules="[{ required: true, validator: validatePrice, trigger: ['blur', 'change'] }]"
       >
-        <div class="el_Storagecategory" v-loading="goriesloading" element-loading-text="Loading...">
-          <div class="el_table_span">
-            <div class="el_table_id">序号</div>
-            <div class="el_table_title">产品品类</div>
-          </div>
+        <el-input-number
+          v-model="details.form.pickupMinCostType"
+          style="width: 13vw"
+          :controls="false"
+          :precision="2"
+          :value-on-clear="0"
+          :min="0"
+        />
+      </el-form-item>
 
-          <!-- 表格循环 -->
-          <div class="el_table_td" v-for="(item, index) in value.categories">
-            <div class="el_table_idNumber">{{ index }}</div>
-            <el-select
-              :ref="value.title + index"
-              class="el_Cselect"
-              v-model="item.goods"
-              filterable
-              clearable
-              placeholder="请选择品类"
-              style="width: 240px"
-              :loading="item.loading"
-              @change="handleChangeCategory(item)"
-              remote
-              reserve-keyword
-              default-first-option
-              :remote-method="value => debounce(remoteMethod(value, item), 500)"
-            >
-              <el-option
-                v-for="val in item.goodsArr"
-                :key="val.goodsId"
-                :label="val.goodsName"
-                :value="val.goodsId"
-              />
-            </el-select>
-            <div class="el_table_operation">
-              <!-- 新增 -->
-              <span
-                v-if="item.plus"
-                @click="handlePlus(value, index)"
-                class="el_table_operation_span_b"
-                >+
-              </span>
-              <!-- 删除 -->
-              <span
-                v-if="item.reduce"
-                @click="handleReduce(value, index)"
-                class="el_table_operation_span_a"
-                >-
-              </span>
-            </div>
-          </div>
-        </div>
+      <el-form-item
+        label="加算价格"
+        prop="AddOnPrice"
+        :rules="[{ required: true, validator: validatePrice, trigger: ['blur', 'change'] }]"
+      >
+        <el-input-number
+          v-model="details.form.AddOnPrice"
+          style="width: 13vw"
+          :controls="false"
+          :precision="2"
+          :value-on-clear="0"
+          :min="0"
+        />
       </el-form-item>
-    </template>
-    <!-- </template> -->
+    </el-form>
 
     <!-- 操作按钮 -->
     <div class="flex-c-c">
@@ -386,16 +409,15 @@ const initFormData = () => {
   details.initForm = deepClone(details.form);
 };
 
-/** 新增品类 */
-const handlePlus = async (value: any, index: number) => {
-  value.categories.splice(index + 1, 0, {
-    reduce: true,
+/** 新增车辆 */
+const handlePlusVehicle = async (value: any, index: number) => {
+  details.form.VehicleBillingDetal.splice(index + 1, 0, {
+    /** 车型 */
+    pickupPricingType: '',
+    /** 车型计费(元/车) */
+    pickupPricing: 0,
     plus: true,
-    goodsName: '',
-    goodsId: '',
-    goods: '',
-    goodsArr: [],
-    loading: false,
+    reduce: true,
   });
 
   await nextTick();
@@ -404,10 +426,10 @@ const handlePlus = async (value: any, index: number) => {
   console.log('instance :>> ', instance.ctx);
 };
 
-/** 删除品类 */
-const handleReduce = (value: any, index: number) => {
+/** 删除车辆 */
+const handleReduceVehicle = (value: any, index: number) => {
   if (index === 0) return;
-  value.categories.splice(index, 1);
+  details.form.VehicleBillingDetal.splice(index, 1);
 };
 
 /** 货物变化时 */
@@ -535,6 +557,7 @@ const handleSubmit = async () => {
     color: #606266;
   }
   .el_table_title {
+    width: 240px;
     font-weight: 600;
     color: #606266;
   }
@@ -603,4 +626,10 @@ const handleSubmit = async () => {
     box-shadow: none;
   }
 }
+
+.table {
+  width: 40vw;
+  text-align: center;
+  border-color: var(--el-color-danger);
+}
 </style>

src/views/basicdata/brand/basicClient.vue

@@ -162,7 +162,7 @@
         </div>
       </el-row>
       <el-dialog title="客户导入" append-to-body v-model="excelBox" width="555px">
-        <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
+        <!-- <avue-form :option="excelOption" v-model="excelForm" :upload-after="uploadAfter">
           <template #excelTemplate>
             <a
               href="http://47.108.51.143:9000/logpm/other/%E5%AE%A2%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
@@ -173,7 +173,38 @@
               </el-button>
             </a>
           </template>
-        </avue-form>
+        </avue-form> -->
+
+        <div>
+          <el-divider content-position="left">客户导入</el-divider>
+        </div>
+
+        <div class="flex-c-sb">
+          <P>请确认传入的文件为Excel文件格式</P>
+
+          <a
+            href="http://47.108.51.143:9000/logpm/other/%E5%AE%A2%E6%88%B7%E5%AF%BC%E5%85%A5%E6%A8%A1%E6%9D%BF.xlsx"
+            download="客户模板.xlsx"
+          >
+            <el-button type="primary" icon="Download"> 点击下载 </el-button>
+          </a>
+        </div>
+
+        <div v-loading="loadingObj.UploadLoadong">
+          <el-upload
+            class="upload-demo"
+            drag
+            :headers="headers"
+            action="/api/logpm-basicdata/basicdataClient/import-basicDataClient"
+            :before-upload="handleBeforeUpload"
+            :on-success="handleSuccess"
+            :on-error="handleClose"
+            multiple
+          >
+            <el-icon class="el-icon--upload"><upload-filled /></el-icon>
+            <div class="el-upload__text">拖拽文件或 <em>点击上传</em></div>
+          </el-upload>
+        </div>
       </el-dialog>
       <!-- 表单模块 -->
       <el-dialog
@@ -696,7 +727,7 @@ export default {
       view: false,
       viewEntd: true,
       viewClientEntd: false,
-      CustomerEntd:false,
+      CustomerEntd: false,
       // 查询信息
       query: {},
       //查询时间
@@ -818,6 +849,8 @@ export default {
       ],
       loadingObj: {
         submitLoading: false,
+        /** 上传文件 */
+        UploadLoadong: false,
       },
     };
   },
@@ -834,11 +867,11 @@ export default {
       });
       return ids.join(',');
     },
-    // headers() {
-    //   return {
-    //     'Blade-Auth': 'Bearer ' + getToken(),
-    //   };
-    // },
+    headers() {
+      return {
+        'Blade-Auth': 'Bearer ' + getToken(),
+      };
+    },
     // action() {
     //   return '/api/blade-resource/oss/endpoint/put-file';
     //   // return '/api/blade-resource/oss/endpoint/put-file-attach'
@@ -846,6 +879,8 @@ export default {
   },
   methods: {
     uploadAfter(res, done, loading, column) {
+      res.data && this.$message.success(res.data.msg);
+      console.log('res :>> ', res);
       window.console.log(column);
       this.excelBox = false;
       // this.refreshChange();
@@ -986,7 +1021,7 @@ export default {
           setTimeout(async () => {
             const response = { valid: false }; // 假设校验通过
             await $_getListlistName({ name: a }).then(res => {
-              console.log("客户名称校验",res.data);
+              console.log('客户名称校验', res.data);
               if (res.data.data.length > 0) {
                 reject(new Error('客户名称已存在')); // 校验不通过，调用 reject() 并传递错误信息
               } else {
@@ -1314,7 +1349,7 @@ export default {
       this.distriType = false;
       this.viewEntd = false;
       this.viewClientEntd = true;
-      this.CustomerEntd=true;
+      this.CustomerEntd = true;
       getDetail(row.id).then(res => {
         this.form = res.data.data;
         if (this.form.detailedly == '0' || this.form.detailedly == '-1') {
@@ -1633,6 +1668,43 @@ export default {
           this.loading = false;
         });
     },
+    /** 上传文件 */
+    handleBeforeUpload(file) {
+      console.log('file :>> ', file);
+      this.loadingObj.UploadLoadong = true;
+
+      // 获取文件类型
+      const _fileNameArr = file.name.split('.');
+      const _fileType = _fileNameArr[_fileNameArr.length - 1];
+
+      const whiteArr = ['xls', 'xlsx'];
+
+      console.log('whiteArr.indexOf(_fileType) :>> ', whiteArr.indexOf(_fileType));
+
+      if (whiteArr.indexOf(_fileType) !== -1) return true;
+
+      this.$message.warning('请传入xls或xlsx格式的文件');
+      this.loadingObj.UploadLoadong = false;
+      return false;
+    },
+
+    /** 长传成功 */
+    handleSuccess(res) {
+      console.log('res :>> ', res);
+      this.loadingObj.UploadLoadong = false;
+      if (res.code !== 200) return this.$message.warning('上传失败');
+      this.$message.success('上传成功');
+      onLoad(this.page);
+    },
+
+    /** 上传失败 */
+    handleClose(res) {
+      this.loadingObj.UploadLoadong = false;
+      // UploadAjaxError
+      const msg = res.msg ? res.data.msg || '上传失败' : '上传失败';
+
+      this.$message.warning(res.msg || '上传失败');
+    },
   },
 };
 </script>
@@ -1667,4 +1739,11 @@ export default {
 :deep(.el-select) {
   width: 100% !important;
 }
+
+// 标题
+:deep(.el-divider__text.is-left) {
+  font-size: 20px;
+  font-weight: bold;
+  color: var(--el-color-primary);
+}
 </style>