2022年5月11日09:53:12

src/crud/index.vue

                         :label-width="formLabelWidth">
                         <!-- 输入框 -->
                         <div style="width: 100%;" v-if="item.form.type === 'input'">
-                            <el-input v-model="form[item.prop]" :type="item.itemType"
+                            <el-input :disabled="item.form.disabled" v-model="form[item.prop]" :type="item.itemType"
                                 :placeholder="item.form.placeholder" />
                         </div>
                         <!-- 选择框 -->
                         <div style="width: 100%;" v-else-if="item.form.type === 'select'">
-                            <el-select style="width: 100%;" v-model="form[item.prop]"
+                            <el-select style="width: 100%;" v-model="form[item.prop]" :disabled="item.form.disabled"
                                 :placeholder="item.form.placeholder">
                                 <el-option v-for="(itemData,index) in item.form.listData" :label="itemData.label"
                                     :value="itemData.value" />
                         </div>
                         <!-- 日期框 -->
                         <div style="width: 100%;" v-else-if="item.form.type === 'date'">
-                            <el-date-picker style="width: 100%;" v-model="form[item.prop]"
+                            <el-date-picker style="width: 100%;" v-model="form[item.prop]" :disabled="item.form.disabled"
                                 :value-format="item.form.valueFormat" :type="item.form.itemType"
                                 :placeholder="item.form.placeholder" />
                         </div>
             </div>
 
             <template #footer>
-                <span v-if="!tableFrom.customDialog">
+                <span v-if="!tableFrom.footerDialog">
                     <el-button @click="cancel">取消</el-button>
                     <el-button type="primary" @click="affirm(ruleFormRef)">提交</el-button>
                 </span>
 
     //表单字段
     const form = ref(initForm)
-    form.value.four = '52011328220201499572'
-    console.log(form.value);
+    form.value.four = '52011328220201499572' //赋值一条测试数据
 
     //重置
     const RefreshLeft = () => {

src/data/cardAfter/cardFillDo.ts

     table: {
         style: '',
         customDialog: true, //自定义Dialog (默认false)
+        footerDialog: true,
         extend: [{
             type: 'index',
             label: '序号',
                     type: 'input',
                     placeholder: '请输入卡片类型'
                 }
-            },
-            {
+            },{
                 prop: 'seven',
                 label: 'OBU编号',
                 width: '200',
             }, {
                 prop: 'eight',
                 label: 'OBU状态',
-                width: '',
+                width: '120',
                 form: {
                     required: true,
                     type: 'input',

src/data/cardAfter/cardRenewal.ts

     },
     table: {
         style: '',
+        footerDialog: true,
         extend: [{
             type: 'index',
             label: '序号',
                 width: '120',
                 overflow: true,
                 form: {
-                    required: true,
+                    required: false,
+                    disabled: true,
                     type: 'input',
                     placeholder: '请输入客户名称'
                 }
             }, {
-                prop: 'two',
+                prop: 'five',
                 label: '证件类型',
-                width: '180',
+                width: '120',
                 form: {
-                    required: true,
+                    required: false,
+                    disabled: true,
                     type: 'input',
                     placeholder: '请输入证件类型'
                 }
             }, {
-                prop: 'three',
-                label: '证件号码',
-                width: '180',
+                prop: 'four',
+                label: '证件号码123',
+                width: '200',
                 form: {
-                    required: true,
+                    required: false,
+                    disabled: true,
                     type: 'input',
                     placeholder: '请输入证件号码'
                 }
             }, {
-                prop: 'four',
+                prop: 'two',
                 label: '车牌号码',
-                width: '200',
+                width: '120',
                 form: {
-                    required: true,
+                    required: false,
+                    disabled: true,
                     type: 'input',
                     placeholder: '请输入车牌号码'
                 }
             }, {
-                prop: 'five',
+                prop: 'four',
                 label: '卡号',
-                width: '180',
+                width: '200',
                 form: {
-                    required: true,
+                    required: false,
+                    disabled: true,
                     type: 'input',
                     placeholder: '请输入卡号'
                 }
                 label: '卡片状态',
                 width: '120',
                 form: {
-                    required: true,
+                    required: false,
+                    disabled: true,
                     type: 'input',
                     placeholder: '请输入卡片状态'
                 }
             },
             {
-                prop: 'seven',
+                prop: 'data',
                 label: '到期时间',
-                width: '',
+                width: '180',
                 form: {
-                    required: true,
+                    required: false,
+                    disabled: true,
                     type: 'input',
                     placeholder: '请输入到期时间'
                 }
         operateTitle: '操作',
         operateFixed: true,
         isOperate: true,
+        operateWidth: '',
         operate: {
             edit: true,
-            delete: true
+            delete: false
         }
     }
 }

src/data/cardAfter/initiativeHangUp.ts

         operateTitle: '操作',
         operateFixed: true,
         isOperate: true,
+        operateWidth: '180',
         operate: {
             edit: true,
             delete: true

src/data/tableConfig.ts

         style: '', //默认表格样式
         border: false, //是否添加边框(默认false)
         customDialog: false, //自定义Dialog (默认false)
+        footerDialog: false, //隐藏弹窗页脚显示 (默认false)
         extend: [{ //表头拓展
             type: '', //类型:selection,index,expand
             width: '', //表头宽度

src/views/dengmingcong/cardFillDo/cardFillDo.vue

         <!-- 自定义搜索 -->
         <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-select v-model="searchCondition.fileThree" placeholder="--请输入车牌颜色--" style="margin-right: 10px;">

src/views/dengmingcong/cardRenewal/cardRenewal.vue

 <template>
     <!-- 卡签续期 -->
-    <CRUD :homeData="Data" text="123">
+    <CRUD ref="crudRef" :homeData="Data" text="123">
         <template #search="{ searchCondition }">
             <!-- 搜索 监听回车 @keyup.enter.native="search"-->
-            <el-input v-model="searchCondition.fileOne" clearable placeholder="卡号" style="width: 200px;margin-right: 10px;" />
-            <el-button type="primary" icon="CreditCard">读卡</el-button>
+            <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 #footer>
+            <span>
+                <el-button @click="crudRef.dialogFormVisible = false">取消</el-button>
+                <el-button type="primary">卡续签</el-button>
+                <el-button type="primary">OBU续签</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/cardRenewal' //表单配置
+    import {
+        ref
+    } from 'vue'
+
+    const crudRef = ref()
 
     const options = [{
             value: 'Option1',