dependencies: update element-plus to 2.8.7. replace flex-custom style with tailwindcss

package.json

@@ -13,11 +13,12 @@
     "@element-plus/icons-vue": "^2.1.0",
     "axios": "~0.27.2",
     "dayjs": "^1.11.13",
-    "element-plus": "2.7.6",
+    "element-plus": "2.8.7",
     "html2canvas": "^1.4.1",
     "jspdf": "^2.5.1",
     "lodash": "^4.17.21",
     "lodash.clonedeep": "^4.5.0",
+    "lodash.debounce": "^4.0.8",
     "mathjs": "^13.2.0",
     "vue": "^3.5.12",
     "vue-router": "^4.4.5",
@@ -26,15 +27,18 @@
   "devDependencies": {
     "@nabla/vite-plugin-eslint": "^2.0.4",
     "@types/lodash.clonedeep": "^4.5.9",
+    "@types/lodash.debounce": "^4.0.9",
     "@typescript-eslint/eslint-plugin": "^7.15.0",
     "@typescript-eslint/parser": "^7.15.0",
     "@vitejs/plugin-vue": "^5.1.4",
     "@vue/eslint-config-prettier": "^9.0.0",
+    "autoprefixer": "^10.4.20",
     "eslint": "^8.57.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-vue": "^9.27.0",
     "prettier": "^3.3.2",
     "sass": "^1.77.6",
+    "tailwindcss": "^3.4.14",
     "typescript": "^5.6.3",
     "vite": "^5.0.5",
     "vue-tsc": "^2.1.10"

postcss.config.cjs

@@ -0,0 +1,9 @@
+// https://github.com/michael-ciniawsky/postcss-load-config
+
+module.exports = {
+  'plugins': {
+    tailwindcss: {},
+    // to edit target browsers: use "browserslist" field in package.json
+    'autoprefixer': {}
+  }
+}

src/App.vue

@@ -26,6 +26,7 @@ const locale = ref(zhCn)
 </script>
 
 <style lang="scss">
+@import '@/assets/css/tailwind.scss';
 body {
   position: relative;
   margin: 0;

src/assets/css/tailwind.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/pages/payment-record/components/edit.vue

@@ -14,7 +14,7 @@
         :model="form"
         label-width="140px"
       >
-        <div class="flex start form-box">
+        <div class="flex items-start form-box">
           <div class="flex-auto">
             <el-form-item
               label="PO Number"
@@ -150,14 +150,14 @@
               <el-input
                 v-model="form.description"
                 type="textarea"
-                rows="3"
+                :rows="3"
               />
             </el-form-item>
           </div>
         </div>
 
         <br />
-        <div class="flex end">
+        <div class="flex justify-end">
           <el-button
             type="primary"
             @click="save(mainForm)"

src/pages/payment-record/components/edit2.vue

@@ -14,7 +14,7 @@
         :model="form"
         label-width="140px"
       >
-        <div class="flex start form-box">
+        <div class="flex items-start form-box">
           <div class="flex-auto">
             <el-form-item
               label="PO Number"
@@ -196,7 +196,7 @@
         </div>
 
         <br />
-        <div class="flex end">
+        <div class="flex justify-end">
           <el-button
             type="primary"
             @click="save(mainForm)"

src/pages/payment-record/components/upload.vue

@@ -11,7 +11,7 @@
     >
       <div
         v-loading="loading"
-        class="flex start"
+        class="flex items-start"
       >
         <el-form
           ref="mainForm"
@@ -28,7 +28,7 @@
               v-model="form.statement_name"
               style="width: 190px"
               type="textarea"
-              rows="3"
+              :rows="3"
             />
           </el-form-item>
 
@@ -93,7 +93,7 @@
         >
           <label for="fileInput">
             <div
-              class="flex column stretch"
+              class="flex flex-col items-stretch"
               style="text-align: center; padding: 44px 20px; cursor: pointer"
             >
               <div>
@@ -126,7 +126,7 @@
         </div>
       </div>
       <br />
-      <div class="flex end">
+      <div class="flex justify-end">
         <el-button
           :loading="loading"
           @click="handleClose"

src/pages/payment-record/index.vue

@@ -17,7 +17,7 @@
     ></div>
     <div class="main-content">
       <navPaymentRecord></navPaymentRecord>
-      <div class="flex between">
+      <div class="flex justify-between">
         <div class="flex btn-wrap">
           <el-button
             :disabled="multipleSelection.length < 1"
@@ -149,7 +149,7 @@
 
         <br />
         <div
-          class="flex between"
+          class="flex justify-between"
           style="align-items: flex-end"
         >
           <el-pagination

src/pages/payment-record2/components/edit.vue

@@ -14,7 +14,7 @@
         :model="form"
         label-width="140px"
       >
-        <div class="flex start form-box">
+        <div class="flex items-start form-box">
           <div class="flex-auto">
             <el-form-item
               label="PO Number"
@@ -196,7 +196,7 @@
         </div>
 
         <br />
-        <div class="flex end">
+        <div class="flex justify-end">
           <el-button
             type="primary"
             @click="save(mainForm)"

src/pages/payment-record2/components/upload.vue

@@ -11,7 +11,7 @@
     >
       <div
         v-loading="loading"
-        class="flex start"
+        class="flex items-start"
       >
         <el-form
           ref="mainForm"
@@ -28,7 +28,7 @@
               v-model="form.statement_name"
               style="width: 190px"
               type="textarea"
-              rows="3"
+              :rows="3"
             />
           </el-form-item>
 
@@ -93,7 +93,7 @@
         >
           <label for="fileInput">
             <div
-              class="flex column stretch"
+              class="flex flex-col items-stretch"
               style="text-align: center; padding: 44px 20px; cursor: pointer"
             >
               <div>
@@ -126,7 +126,7 @@
         </div>
       </div>
       <br />
-      <div class="flex end">
+      <div class="flex justify-end">
         <el-button
           :loading="loading"
           @click="handleClose"

src/pages/payment-record2/index.vue

@@ -17,7 +17,7 @@
     ></div>
     <div class="main-content">
       <navPaymentRecord></navPaymentRecord>
-      <div class="flex between">
+      <div class="flex justify-between">
         <div class="flex btn-wrap">
           <el-button
             :disabled="multipleSelection.length < 1"
@@ -198,7 +198,7 @@
         </el-table>
         <br />
         <div
-          class="flex between"
+          class="flex justify-between"
           style="align-items: flex-end"
         >
           <el-pagination

src/pages/payment-record3/components/edit.vue

@@ -14,7 +14,7 @@
         :model="form"
         label-width="185px"
       >
-        <div class="flex start form-box">
+        <div class="flex items-start form-box">
           <div class="flex-auto">
             <el-form-item
               label="Reference"
@@ -97,7 +97,7 @@
         </div>
 
         <br />
-        <div class="flex center">
+        <div class="flex justify-center">
           <el-button
             type="primary"
             @click="save(mainForm)"

src/pages/payment-record3/components/upload.vue

@@ -11,7 +11,7 @@
     >
       <div
         v-loading="loading"
-        class="flex start"
+        class="flex items-start"
       >
         <el-form
           ref="mainForm"
@@ -28,7 +28,7 @@
               v-model="form.statement_name"
               style="width: 190px"
               type="textarea"
-              rows="3"
+              :rows="3"
             />
           </el-form-item>
 
@@ -93,7 +93,7 @@
         >
           <label for="fileInput">
             <div
-              class="flex column stretch"
+              class="flex flex-col items-stretch"
               style="text-align: center; padding: 44px 20px; cursor: pointer"
             >
               <div>
@@ -126,7 +126,7 @@
         </div>
       </div>
       <br />
-      <div class="flex end">
+      <div class="flex justify-end">
         <el-button
           :loading="loading"
           @click="handleClose"

src/pages/payment-record3/index.vue

@@ -16,7 +16,7 @@
     ></div>
     <div class="main-content">
       <navPaymentRecord></navPaymentRecord>
-      <div class="flex between">
+      <div class="flex justify-between">
         <div class="flex btn-wrap">
           <el-button
             :disabled="multipleSelection.length < 1"
@@ -55,7 +55,7 @@
           <img :src="getLogoPath()" />
         </div>
       </div>
-      <div class="flex start between">
+      <div class="flex items-start between">
         <div class="table-left">
           <el-form
             ref="trackingForm"
@@ -193,7 +193,7 @@
           </el-table>
           <br />
           <div
-            class="flex between"
+            class="flex justify-between"
             style="align-items: flex-end"
           >
             <el-pagination

src/pages/purchase-order/edit.vue

@@ -39,7 +39,7 @@
       v-show="formVisible"
       class="screen"
     >
-      <div class="flex between page-title-wrap">
+      <div class="flex justify-between page-title-wrap">
         <div class="flex">
           <el-icon
             size="36px"
@@ -56,7 +56,7 @@
         :rules="formRule"
         label-width="120px"
       >
-        <div class="flex start">
+        <div class="flex items-start">
           <div class="layout-left">
             <el-form-item
               prop="Order_Type"
@@ -108,7 +108,7 @@
               label="Suggest Supplier"
               label-width="130px"
             >
-              <div class="flex column start">
+              <div class="flex flex-col items-start">
                 <div
                   v-for="(item, index) in recommandVendor"
                   :key="index"
@@ -142,7 +142,7 @@
 
             <div class="company-info">
               <div class="company-name">{{ computedCompany.name }}</div>
-              <div class="flex center">
+              <div class="flex justify-center">
                 <div class="company-addr">
                   地址:&nbsp;{{ computedCompany.addr }}
                 </div>
@@ -162,7 +162,7 @@
               <div class="left"></div>
               <div class="right"></div>
             </div>
-            <div class="flex start between form-area">
+            <div class="flex items-start justify-between form-area">
               <div class="form-area-left">
                 <div class="">
                   <span style="color: #f56c6c">*</span>
@@ -423,7 +423,7 @@
                 Add Row
               </el-button>
             </div>
-            <div class="flex end">
+            <div class="flex justify-end">
               <div class="product-total-table">
                 <div class="total-item">
                   <div class="label">Sub Total</div>
@@ -463,28 +463,28 @@
                 <el-input
                   v-model="form.field12"
                   type="textarea"
-                  rows="3"
+                  :rows="3"
                 ></el-input>
               </el-form-item>
               <el-form-item label="产品质量:">
                 <el-input
                   v-model="form.field13"
                   type="textarea"
-                  rows="3"
+                  :rows="3"
                 ></el-input>
               </el-form-item>
               <el-form-item label="质量承诺:">
                 <el-input
                   v-model="form.field10"
                   type="textarea"
-                  rows="3"
+                  :rows="3"
                 ></el-input>
               </el-form-item>
               <el-form-item label="箱子箱唛:">
                 <el-input
                   v-model="form.field11"
                   type="textarea"
-                  rows="3"
+                  :rows="3"
                 ></el-input>
               </el-form-item>
             </div>
@@ -602,24 +602,24 @@
 
             <div
               v-if="currentCompany === 'PrimePacCommon'"
-              class="flex stretch PrimePac-table"
+              class="flex items-stretch PrimePac-table"
             >
-              <div class="flex column stretch">
-                <div class="column-item flex center">制作要求</div>
-                <div class="flex-auto column-item flex center">
+              <div class="flex flex-col items-stretch">
+                <div class="column-item flex justify-center">制作要求</div>
+                <div class="flex-auto column-item flex justify-center">
                   产品外观要求
                 </div>
               </div>
-              <div class="flex-auto flex column stretch">
+              <div class="flex-auto flex flex-col items-stretch">
                 <div
                   v-for="(item, index) in PrimePacCommonRuleTableData"
                   :key="index"
-                  class="flex stretch flex-auto"
+                  class="flex items-stretch flex-auto"
                 >
-                  <div class="column-item flex center">
+                  <div class="column-item flex justify-center">
                     {{ item.project }}
                   </div>
-                  <div class="column-item flex-auto flex center">
+                  <div class="column-item flex-auto flex justify-center">
                     {{ item.method }}
                   </div>
                 </div>
@@ -628,44 +628,44 @@
 
             <div
               v-if="currentCompany === 'PrimePacSoft'"
-              class="flex column stretch PrimePac-table"
+              class="flex flex-col items-stretch PrimePac-table"
             >
-              <div class="flex stretch">
-                <div class="flex column stretch">
-                  <div class="column-item flex-auto flex center">制作要求</div>
+              <div class="flex items-stretch">
+                <div class="flex flex-col items-stretch">
+                  <div class="column-item flex-auto flex justify-center">制作要求</div>
                 </div>
-                <div class="flex-auto flex column stretch">
+                <div class="flex-auto flex flex-col items-stretch">
                   <div
                     v-for="(item, index) in PrimePacSoftRuleTableData1"
                     :key="index"
-                    class="flex stretch flex-auto"
+                    class="flex items-stretch flex-auto"
                   >
-                    <div class="column-item flex center">
+                    <div class="column-item flex justify-center">
                       {{ item.project }}
                     </div>
-                    <div class="column-item flex-auto flex center">
+                    <div class="column-item flex-auto flex justify-center">
                       {{ item.method }}
                     </div>
                   </div>
                 </div>
               </div>
 
-              <div class="flex stretch">
-                <div class="flex column stretch">
-                  <div class="column-item flex-auto flex center">
+              <div class="flex items-stretch">
+                <div class="flex flex-col items-stretch">
+                  <div class="column-item flex-auto flex justify-center">
                     产品技术要求
                   </div>
                 </div>
-                <div class="flex-auto flex column stretch">
+                <div class="flex-auto flex flex-col items-stretch">
                   <div
                     v-for="(item, index) in PrimePacSoftRuleTableData2"
                     :key="index"
-                    class="flex stretch flex-auto"
+                    class="flex items-stretch flex-auto"
                   >
-                    <div class="column-item flex center">
+                    <div class="column-item flex justify-center">
                       {{ item.project }}
                     </div>
-                    <div class="column-item flex-auto flex center">
+                    <div class="column-item flex-auto flex justify-center">
                       {{ item.method }}
                     </div>
                   </div>
@@ -689,7 +689,7 @@
         >
           <div class="company-info">
             <div class="company-name">{{ computedCompany.name }}</div>
-            <div class="flex center">
+            <div class="flex justify-center">
               <div class="company-addr">
                 地址:&nbsp;{{ computedCompany.addr }}
               </div>
@@ -719,7 +719,7 @@
               </tr>
             </table>
           </div>
-          <div class="form-area flex start">
+          <div class="form-area flex items-start">
             <div class="flex-auto">
               <div>供应商(乙方) :</div>
               <div
@@ -774,7 +774,7 @@
                   }}
                 </div>
               </div>
-              <div class="flex start">
+              <div class="flex items-start">
                 <div class="column-form-label">参考 :</div>
                 <div class="column-form-value">
                   {{ form.Title }}
@@ -784,7 +784,7 @@
               <template
                 v-if="typeof computedCompany.taxReimbursement === 'undefined'"
               >
-                <div class="flex start">
+                <div class="flex items-start">
                   <div class="column-form-label">收货详情 :</div>
                   <div class="column-form-value">
                     {{ form.field9 }}
@@ -878,7 +878,7 @@
           </div>
 
           <!-- <br /> -->
-          <div class="flex between start">
+          <div class="flex justify-between items-start">
             <div
               v-if="userInfo.Organization !== 'PrimePac'"
               class="note-form-area"
@@ -987,22 +987,22 @@
 
           <div
             v-if="currentCompany === 'PrimePacCommon'"
-            class="flex stretch PrimePac-table"
+            class="flex items-stretch PrimePac-table"
           >
-            <div class="flex column stretch">
-              <div class="column-item flex center">制作要求</div>
-              <div class="flex-auto column-item flex center">产品外观要求</div>
+            <div class="flex flex-col items-stretch">
+              <div class="column-item flex justify-center">制作要求</div>
+              <div class="flex-auto column-item flex justify-center">产品外观要求</div>
             </div>
-            <div class="flex-auto flex column stretch">
+            <div class="flex-auto flex flex-col items-stretch">
               <div
                 v-for="(item, index) in PrimePacCommonRuleTableData"
                 :key="index"
-                class="flex stretch flex-auto"
+                class="flex items-stretch flex-auto"
               >
-                <div class="column-item flex center">
+                <div class="column-item flex justify-center">
                   {{ item.project }}
                 </div>
-                <div class="column-item flex-auto flex center">
+                <div class="column-item flex-auto flex justify-center">
                   {{ item.method }}
                 </div>
               </div>
@@ -1011,44 +1011,44 @@
 
           <div
             v-if="currentCompany === 'PrimePacSoft'"
-            class="flex column stretch PrimePac-table"
+            class="flex flex-col items-stretch PrimePac-table"
           >
-            <div class="flex stretch">
-              <div class="flex column stretch">
-                <div class="column-item flex-auto flex center">制作要求</div>
+            <div class="flex items-stretch">
+              <div class="flex flex-col items-stretch">
+                <div class="column-item flex-auto flex justify-center">制作要求</div>
               </div>
-              <div class="flex-auto flex column stretch">
+              <div class="flex-auto flex flex-col items-stretch">
                 <div
                   v-for="(item, index) in PrimePacSoftRuleTableData1"
                   :key="index"
-                  class="flex stretch flex-auto"
+                  class="flex items-stretch flex-auto"
                 >
-                  <div class="column-item flex center">
+                  <div class="column-item flex justify-center">
                     {{ item.project }}
                   </div>
-                  <div class="column-item flex-auto flex center">
+                  <div class="column-item flex-auto flex justify-center">
                     {{ item.method }}
                   </div>
                 </div>
               </div>
             </div>
 
-            <div class="flex stretch">
-              <div class="flex column stretch">
-                <div class="column-item flex-auto flex center">
+            <div class="flex items-stretch">
+              <div class="flex flex-col items-stretch">
+                <div class="column-item flex-auto flex justify-center">
                   产品技术要求
                 </div>
               </div>
-              <div class="flex-auto flex column stretch">
+              <div class="flex-auto flex flex-col items-stretch">
                 <div
                   v-for="(item, index) in PrimePacSoftRuleTableData2"
                   :key="index"
-                  class="flex stretch flex-auto"
+                  class="flex items-stretch flex-auto"
                 >
-                  <div class="column-item flex center">
+                  <div class="column-item flex justify-center">
                     {{ item.project }}
                   </div>
-                  <div class="column-item flex-auto flex center">
+                  <div class="column-item flex-auto flex justify-center">
                     {{ item.method }}
                   </div>
                 </div>
@@ -1117,12 +1117,12 @@
           <div class="billing-addr">
             {{ computedVendor.Billing_Address || '' }}
           </div>
-          <div class="flex around contact-info">
+          <div class="flex justify-around contact-info">
             <div class="flex">
               <div>Tel No.:</div>
               <div>&nbsp;{{ computedVendor.Phone }}</div>
             </div>
-            <div class="flex center">
+            <div class="flex justify-center">
               <div>E-mail:</div>
               <div class="">&nbsp;{{ computedVendor.Email }}</div>
             </div>
@@ -1130,7 +1130,7 @@
 
           <div class="base-info-area">
             <div class="flex">
-              <div class="flex start left">
+              <div class="flex items-start left">
                 <div class="base-info-label">TO:</div>
                 <div
                   v-if="currentCompany === 'AZYTaxReimbursement'"
@@ -1152,8 +1152,8 @@
               </div>
             </div>
 
-            <div class="flex start">
-              <div class="left flex start">
+            <div class="flex items-start">
+              <div class="left flex items-start">
                 <div class="base-info-label">ADD:</div>
                 <div>
                   <div
@@ -1177,7 +1177,7 @@
               </div>
             </div>
 
-            <div class="flex start">
+            <div class="flex items-start">
               <div class="left flex">
                 <div class="base-info-label">ATTN:</div>
                 <div class="base-info-value">Accounts</div>
@@ -1188,7 +1188,7 @@
               </div>
             </div>
 
-            <div class="flex start">
+            <div class="flex items-start">
               <div class="flex left">
                 <template v-if="currentCompany === 'FOTTaxReimbursement'">
                   <div class="base-info-label">TEL NO:</div>
@@ -1243,7 +1243,7 @@
                 </td>
               </tr>
             </table>
-            <div class="flex end">
+            <div class="flex justify-end">
               <div
                 class="flex"
                 style="margin-top: 10pt"
@@ -1300,7 +1300,7 @@
             </div>
           </div>
           <br />
-          <div class="flex between start">
+          <div class="flex justify-between items-start">
             <div class="">
               <div class="">BUYERS' SIGNATURE</div>
               <div class="sign-wrap">

src/pages/wecom-approval/admin-portal.vue

@@ -17,7 +17,7 @@
     ></div>
     <div
       v-if="pwd !== '123458'"
-      class="main-content flex center"
+      class="main-content flex justify-center"
     >
       <el-input
         v-model="pwd"
@@ -40,7 +40,7 @@
         </div>
         <div class="page-title">企业微信用户列表</div>
       </div>
-      <div class="flex start">
+      <div class="flex items-start">
         <div style="width: 360px">
           <div
             v-for="item in deptList"

src/pages/wecom-approval/index.vue

@@ -171,21 +171,21 @@
 
         <el-form-item label="地址">
           <div class="addr-input-group">
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.ATTN"
                 placeholder="ATTN"
               ></el-input>
               <div class="addr-append">ATTN</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Phone"
                 placeholder="Phone"
               ></el-input>
               <div class="addr-append">Phone</div>
             </div>
-            <div class="flex start stretch">
+            <div class="flex items-stretch">
               <el-input
                 v-model="form.Shipping_Unit_Building_Name"
                 placeholder="Shipping Unit/Building Name"
@@ -194,35 +194,35 @@
               ></el-input>
               <div class="addr-append">Shipping Unit</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_Street"
                 placeholder="Shipping Street"
               ></el-input>
               <div class="addr-append">Shipping Street</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_City"
                 placeholder="Shipping City"
               ></el-input>
               <div class="addr-append">Shipping City</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_State"
                 placeholder="Shipping state"
               ></el-input>
               <div class="addr-append">Shipping State</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_Code"
                 placeholder="Shipping Code"
               ></el-input>
               <div class="addr-append">Shipping Code</div>
             </div>
-            <div class="flex start">
+            <div class="flex items-start">
               <el-input
                 v-model="form.Shipping_Country"
                 placeholder="Shipping Country"

tailwind.config.cjs

@@ -0,0 +1,32 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: ['./index.html', './src/**/*.{vue,js}'],
+  theme: {
+    extend: {
+      colors: {
+        gray: {
+          0: '#000',
+          1: '#111',
+          2: '#222',
+          3: '#333',
+          4: '#444',
+          5: '#555',
+          6: '#666',
+          7: '#777',
+          8: '#888',
+          9: '#999',
+          a: '#aaa',
+          b: '#bbb',
+          c: '#ccc',
+          d: '#ddd',
+          e: '#eee',
+          f: '#fff',
+        },
+      },
+    },
+  },
+  plugins: [],
+  corePlugins: {
+    preflight: false,
+  },
+}

vite.config.ts

@@ -26,7 +26,7 @@ export default defineConfig(({ mode }) => {
       devSourcemap: true,
       preprocessorOptions: {
         scss: {
-          additionalData: `@import '@/assets/css/flex-custom.scss';@import '@/assets/css/var.scss';`,
+          additionalData: `@import '@/assets/css/var.scss';`,
         },
       },
     },