2022年5月10日16:17:15

package-lock.json

 {
-  "name": "etc-project",
+  "name": "etcProject",
   "version": "0.0.0",
   "lockfileVersion": 2,
   "requires": true,
       "dependencies": {
         "@element-plus/icons-vue": "^1.1.4",
         "axios": "^0.27.2",
+        "babel-polyfill": "^6.26.0",
         "element-plus": "^2.1.7",
         "file-saver": "^2.0.5",
         "fuse.js": "^6.5.3",
         "form-data": "^4.0.0"
       }
     },
+    "node_modules/babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha512-F2rZGQnAdaHWQ8YAoeRbukc7HS9QgdgeyJ0rQDd485v9opwuPvjpPFcOOT/WmkKTdgy9ESgSPXDcTNpzrGr6iQ==",
+      "dependencies": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      }
+    },
+    "node_modules/babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "dependencies": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      }
+    },
+    "node_modules/babel-runtime/node_modules/regenerator-runtime": {
+      "version": "0.11.1",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+      "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714233441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
         "is-what": "^3.14.1"
       }
     },
+    "node_modules/core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ==",
+      "deprecated": "core-js@<3.4 is no longer maintained and not recommended for usage due to the number of issues. Because of the V8 engine whims, feature detection in old core-js versions could cause a slowdown up to 100x even if nothing is polyfilled. Please, upgrade your dependencies to the actual version of core-js.",
+      "hasInstallScript": true
+    },
     "node_modules/core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.nlark.com/core-util-is/download/core-util-is-1.0.3.tgz",
         "node": ">=8.10.0"
       }
     },
+    "node_modules/regenerator-runtime": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+      "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
+    },
     "node_modules/regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.nlark.com/regexpp/download/regexpp-3.2.0.tgz?cache=0&sync_timestamp=1623668872577&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fregexpp%2Fdownload%2Fregexpp-3.2.0.tgz",
         "form-data": "^4.0.0"
       }
     },
+    "babel-polyfill": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz",
+      "integrity": "sha512-F2rZGQnAdaHWQ8YAoeRbukc7HS9QgdgeyJ0rQDd485v9opwuPvjpPFcOOT/WmkKTdgy9ESgSPXDcTNpzrGr6iQ==",
+      "requires": {
+        "babel-runtime": "^6.26.0",
+        "core-js": "^2.5.0",
+        "regenerator-runtime": "^0.10.5"
+      }
+    },
+    "babel-runtime": {
+      "version": "6.26.0",
+      "resolved": "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz",
+      "integrity": "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g==",
+      "requires": {
+        "core-js": "^2.4.0",
+        "regenerator-runtime": "^0.11.0"
+      },
+      "dependencies": {
+        "regenerator-runtime": {
+          "version": "0.11.1",
+          "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz",
+          "integrity": "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+        }
+      }
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714233441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz",
         "is-what": "^3.14.1"
       }
     },
+    "core-js": {
+      "version": "2.6.12",
+      "resolved": "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz",
+      "integrity": "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+    },
     "core-util-is": {
       "version": "1.0.3",
       "resolved": "https://registry.nlark.com/core-util-is/download/core-util-is-1.0.3.tgz",
         "picomatch": "^2.2.1"
       }
     },
+    "regenerator-runtime": {
+      "version": "0.10.5",
+      "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz",
+      "integrity": "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
+    },
     "regexpp": {
       "version": "3.2.0",
       "resolved": "https://registry.nlark.com/regexpp/download/regexpp-3.2.0.tgz?cache=0&sync_timestamp=1623668872577&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fregexpp%2Fdownload%2Fregexpp-3.2.0.tgz",

package.json

   "dependencies": {
     "@element-plus/icons-vue": "^1.1.4",
     "axios": "^0.27.2",
+    "babel-polyfill": "^6.26.0",
     "element-plus": "^2.1.7",
     "file-saver": "^2.0.5",
     "fuse.js": "^6.5.3",

src/crud/index.vue

                 :width="item.width" :show-overflow-tooltip="!item.overflow" />
 
             <el-table-column :fixed="tableFrom.operateFixed ? 'right' : 'false'" :label="tableFrom.operateTitle"
-                :width="tableFrom.operateWidth ? tableFrom.operateWidth : '150px'">
+                :width="tableFrom.operateWidth ? tableFrom.operateWidth : ''">
                 <!-- 默认插槽值 -->
                 <template #default="scope">
                     <ud-operation :scope="scope" :data="testData" :isEdit="tableFrom.operate.edit"
                         :isDelete="tableFrom.operate.delete" @handleEdit="handleEdit" @handleDelete="handleDelete">
                     </ud-operation>
                     <!-- 具名插槽(自定义操作按钮) -->
-                    <slot name="operation" :scope="scope" />
+                    <slot name="operation" :scope="scope" :tableFrom="dialogFormVisible" />
                 </template>
             </el-table-column>
         </el-table>
         <el-dialog v-model="dialogFormVisible" :title="tableFrom.titleDialog ? tableFrom.titleDialog : `${title}`">
             <!-- 是否自定义Dialog -->
             <div v-if="tableFrom.customDialog">
-                <!-- <slot name="search" :dialogFormVisible="dialogFormVisible" /> -->
+                <slot name="dialog" :form="form" />
             </div>
             <div v-else>
                 <!-- 系统内容 -->
                 </el-form>
             </div>
 
-            <template v-if="!tableFrom.customDialog" #footer>
-                <span class="dialog-footer">
+            <template #footer>
+                <span v-if="!tableFrom.customDialog">
                     <el-button @click="cancel">取消</el-button>
                     <el-button type="primary" @click="affirm(ruleFormRef)">提交</el-button>
                 </span>
+                <slot name="footer" />
             </template>
         </el-dialog>
 
         row.visible = false
         emit('handleDelete', idx, row)
     }
+
+    //将需要暴露出去的数据与方法都可以暴露出去
+    defineExpose({
+        dialogFormVisible,
+        title
+    })
 </script>
 <style lang="scss">
 </style>

src/data/cardAfter/cardFillDo.ts

     },
     table: {
         style: '',
-        customDialog: false, //自定义Dialog (默认false)
-        titleDialog: '补卡信息', //自定义Dialog标题
+        customDialog: true, //自定义Dialog (默认false)
         extend: [{
             type: 'index',
             label: '序号',
             }, {
                 prop: 'four',
                 label: '卡号',
-                width: '180',
+                width: '200',
                 form: {
                     required: true,
                     type: 'input',
             {
                 prop: 'seven',
                 label: 'OBU编号',
-                width: '180',
+                width: '200',
                 form: {
                     required: true,
                     type: 'input',
         operateTitle: '操作',
         operateFixed: true,
         isOperate: true,
-        operateWidth: '80px',
+        operateWidth: '',
         operate: {
-            edit: true,
+            edit: false,
             delete: false
         }
     }

src/data/cardAfter/cardRenewal.ts

             }, {
                 prop: 'four',
                 label: '车牌号码',
-                width: '120',
+                width: '200',
                 form: {
                     required: true,
                     type: 'input',
             {
                 prop: 'seven',
                 label: '到期时间',
-                width: '180',
+                width: '',
                 form: {
                     required: true,
                     type: 'input',

src/data/cardAfter/initiativeHangUp.ts

             }, {
                 prop: 'eight',
                 label: 'OBU状态',
-                width: '120',
+                width: '',
                 form: {
                     required: true,
                     type: 'input',

src/data/tableConfig.ts

         style: '', //默认表格样式
         border: false, //是否添加边框(默认false)
         customDialog: false, //自定义Dialog (默认false)
-        titleDialog: '', //自定义Dialog标题
         extend: [{ //表头拓展
             type: '', //类型:selection,index,expand
             width: '', //表头宽度

src/main.ts

+import 'babel-polyfill';
 //#pragma warning(disable:18)
 import { createApp, createVNode } from 'vue'
 import App from './App.vue'

src/views/dengmingcong/cardFillDo/cardFillDo.vue

 <template>
     <!-- 卡签补办 -->
-    <CRUD :homeData="Data" text="123">
+    <CRUD ref="crudRef" :homeData="datas">
         <!-- 自定义搜索 -->
         <template #search="{ searchCondition }">
             <!-- 搜索 监听回车 @keyup.enter.native="search"-->
             <el-input v-model="searchCondition.fileOne" clearable placeholder="卡号" style="width: 200px;" />
-            <el-input v-model="searchCondition.fileTwo" clearable placeholder="车牌号码" style="width: 200px;margin: 0 10px 0 10px;" />
+            <el-input v-model="searchCondition.fileTwo" clearable placeholder="车牌号码"
+                style="width: 200px;margin: 0 10px 0 10px;" />
             <el-select v-model="searchCondition.fileThree" placeholder="--请输入车牌颜色--" style="margin-right: 10px;">
                 <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
             </el-select>
         </template>
+        <!-- 自定义编辑提交按钮 -->
+        <template #operation="{ scope , tableFrom}">
+            <el-button size="small" @click="reissue(scope,tableFrom)">补卡</el-button>
+        </template>
         <!-- 自定义弹框内容 -->
+        <template #dialog>
+            <el-form :model="fromData">
+                <el-form-item>
+                    <div class="as-layout-horizontal">
+                        <el-input v-model="fromData.crud" type="input" placeholder="读新卡信息" />
+                        <el-button type="primary" icon="CreditCard" style="margin-left: 10px;">读卡</el-button>
+                    </div>
+                </el-form-item>
+                <el-form-item>
+                    <el-input v-model="fromData.crud" disabled type="input" placeholder="52011328220200034040" />
+                </el-form-item>
+            </el-form>
+            
+        </template>
+        <!-- 弹窗页脚 -->
+        <template #footer>
+            <span>
+                <el-button @click="crudRef.dialogFormVisible = false">取消</el-button>
+                <el-button type="primary">提交</el-button>
+            </span>
+        </template>
     </CRUD>
 </template>
 <script setup lang="ts">
-    import CRUD from "@/crud/index.vue";
+    import CRUD from "@/crud/index.vue"
     import {
         Data
     } from '@/data/cardAfter/cardFillDo' //表单配置
     import {
         tableData
     } from "@/data/tableData" //表单数据
+    import {
+        ref,
+        reactive
+    } from 'vue'
+
+    const datas = reactive(Data);
+    const crudRef = ref()
+    const fromData = reactive({})
+    const reissue = (scope, tableFrom) => {
+        crudRef.value.dialogFormVisible = true
+        crudRef.value.title = '补卡信息'
+    }
 
     const options = [{
             value: 'Option1',

vite.config.ts

         },
       },
     },
+    entry: {
+      index: ["babel-polyfill", "./src/main.ts"],
+    },
     //启动服务配置
     server: {
       host: '0.0.0.0',

yarn.lock

     "follow-redirects" "^1.14.9"
     "form-data" "^4.0.0"
 
+"babel-polyfill@^6.26.0":
+  "integrity" "sha512-F2rZGQnAdaHWQ8YAoeRbukc7HS9QgdgeyJ0rQDd485v9opwuPvjpPFcOOT/WmkKTdgy9ESgSPXDcTNpzrGr6iQ=="
+  "resolved" "https://registry.npmmirror.com/babel-polyfill/-/babel-polyfill-6.26.0.tgz"
+  "version" "6.26.0"
+  dependencies:
+    "babel-runtime" "^6.26.0"
+    "core-js" "^2.5.0"
+    "regenerator-runtime" "^0.10.5"
+
+"babel-runtime@^6.26.0":
+  "integrity" "sha512-ITKNuq2wKlW1fJg9sSW52eepoYgZBggvOAHC0u/CYu/qxQ9EVzThCgR69BnSXLHjy2f7SY5zaQ4yt7H9ZVxY2g=="
+  "resolved" "https://registry.npmmirror.com/babel-runtime/-/babel-runtime-6.26.0.tgz"
+  "version" "6.26.0"
+  dependencies:
+    "core-js" "^2.4.0"
+    "regenerator-runtime" "^0.11.0"
+
 "balanced-match@^1.0.0":
   "integrity" "sha1-6D46fj8wCzTLnYf2FfoMvzV2kO4="
   "resolved" "https://registry.npm.taobao.org/balanced-match/download/balanced-match-1.0.2.tgz?cache=0&sync_timestamp=1617714233441&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbalanced-match%2Fdownload%2Fbalanced-match-1.0.2.tgz"
   dependencies:
     "is-what" "^3.14.1"
 
+"core-js@^2.4.0", "core-js@^2.5.0":
+  "integrity" "sha512-Kb2wC0fvsWfQrgk8HU5lW6U/Lcs8+9aaYcy4ZFc6DDlo4nZ7n70dEgE5rtR0oG6ufKDUnrwfWL1mXR5ljDatrQ=="
+  "resolved" "https://registry.npmmirror.com/core-js/-/core-js-2.6.12.tgz"
+  "version" "2.6.12"
+
 "core-util-is@~1.0.0":
   "integrity" "sha1-pgQtNjTCsn6TKPg3uWX6yDgI24U="
   "resolved" "https://registry.nlark.com/core-util-is/download/core-util-is-1.0.3.tgz"
   dependencies:
     "picomatch" "^2.2.1"
 
+"regenerator-runtime@^0.10.5":
+  "integrity" "sha512-02YopEIhAgiBHWeoTiA8aitHDt8z6w+rQqNuIftlM+ZtvSl/brTouaU7DW6GO/cHtvxJvS4Hwv2ibKdxIRi24w=="
+  "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.10.5.tgz"
+  "version" "0.10.5"
+
+"regenerator-runtime@^0.11.0":
+  "integrity" "sha512-MguG95oij0fC3QV3URf4V2SDYGJhJnJGqvIIgdECeODCT98wSWDAJ94SSuVpYQUoTcGUIL6L4yNB7j1DFFHSBg=="
+  "resolved" "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.11.1.tgz"
+  "version" "0.11.1"
+
 "regexpp@^3.1.0", "regexpp@^3.2.0":
   "integrity" "sha1-BCWido2PI7rXDKS5BGH6LxIT4bI="
   "resolved" "https://registry.nlark.com/regexpp/download/regexpp-3.2.0.tgz?cache=0&sync_timestamp=1623668872577&other_urls=https%3A%2F%2Fregistry.nlark.com%2Fregexpp%2Fdownload%2Fregexpp-3.2.0.tgz"