添加详细弹窗

src/views/fancongcong/corporateaccountManage/corporateaccountManage.vue

@@ -2,15 +2,6 @@
 	<div class="app_container">
 		<div class="menu">
 			<el-form :inline="true" :model="formInline" class="demo-form-inline">
-				<el-form-item label="对公账户资金账户编号">
-					<el-input v-model="formInline.user" placeholder="对公账户资金账户编号" />
-				</el-form-item>
-				<el-form-item label="公司证件号">
-					<el-input v-model="formInline.user" placeholder="公司证件号" />
-				</el-form-item>
-				<el-form-item label="公司名称">
-					<el-input v-model="formInline.user" placeholder="公司名称" />
-				</el-form-item>
 				<el-form-item label="申请时间">
 					<div class="block">
 						<el-date-picker v-model="value1" type="datetime" placeholder="" />
@@ -32,13 +23,25 @@
 						<el-option v-for="item in optiones" :key="item.value" :label="item.label" :value="item.value" />
 					</el-select>
 				</el-form-item>
+				<el-form-item label="对公账户资金账户编号">
+					<el-input v-model="formInline.user" placeholder="对公账户资金账户编号" />
+				</el-form-item>
+				<el-form-item label="公司证件号">
+					<el-input v-model="formInline.user" placeholder="公司证件号" />
+				</el-form-item>
+				<el-form-item label="公司名称">
+					<el-input v-model="formInline.user" placeholder="公司名称" />
+				</el-form-item>
+
 				<el-form-item>
 					<el-button :icon="Search" type="primary">查询</el-button>
+					<el-button type="info">重置</el-button>
+					<el-button :icon="download" type="primary">导出</el-button>
 				</el-form-item>
 			</el-form>
 		</div>
-		<el-table :data="tableData" border style="width: 100%" class="table_box" scrollbar-always-on="true">
-			<el-table-column prop="date" label="序号" />
+		<el-table :data="tableData" border style="width: 100%" class="table_box" scrollbar-always-on="true" stripe >
+			<el-table-column prop="date" label="序号" width="100px"/>
 			<el-table-column prop="name" label="对公账户资金账户编号" />
 			<el-table-column prop="address" label="公司名称" />
 			<el-table-column prop="number" label="公司证件号" />
@@ -47,23 +50,48 @@
 			<el-table-column prop="regname" label="审核人员" />
 			<el-table-column prop="regtime" label="审核时间" />
 			<el-table-column label="操作" align="center">
-
 				<el-tooltip content="详细" placement="top">
-					<el-button>详细</el-button>
+					<el-button type="primary" @click="dialogFormVisible = true">详细</el-button>
+				</el-tooltip>
+				<el-tooltip content="驳回" placement="top">
+					<el-button type="danger">驳回</el-button>
+				</el-tooltip>
+				<el-tooltip content="审核通过" placement="top">
+					<el-button type="warning">审核通过</el-button>
 				</el-tooltip>
-
 			</el-table-column>
 		</el-table>
 
 		<div class="page_box">
 			<el-pagination :page-size="20" :pager-count="11" layout="prev, pager, next" :total="1000" />
 		</div>
+
+		<el-dialog v-model="dialogFormVisible" title="Shipping address">
+			<el-form :model="form">
+				<el-form-item label="Promotion name" :label-width="formLabelWidth">
+					<el-input v-model="form.name" autocomplete="off" />
+				</el-form-item>
+				<el-form-item label="Zones" :label-width="formLabelWidth">
+					<el-select v-model="form.region" placeholder="Please select a zone">
+						<el-option label="Zone No.1" value="shanghai" />
+						<el-option label="Zone No.2" value="beijing" />
+					</el-select>
+				</el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="dialogFormVisible = false">Cancel</el-button>
+					<el-button type="primary" @click="dialogFormVisible = false">Confirm</el-button>
+				</span>
+			</template>
+		</el-dialog>
 	</div>
 </template>
 
 <script lang="ts" setup>
 	import {
-		Search
+		Search,
+		Dwnload
 	} from '@element-plus/icons-vue'
 	import {
 		reactive,
@@ -105,7 +133,23 @@
 	const value2 = ref('')
 	const value3 = ref('')
 	const value4 = ref('')
-
+	
+	const dialogTableVisible = ref(false)
+	const dialogFormVisible = ref(false)
+	const formLabelWidth = '140px'
+	
+	const form = reactive({
+	  name: '',
+	  region: '',
+	  date1: '',
+	  date2: '',
+	  delivery: false,
+	  type: [],
+	  resource: '',
+	  desc: '',
+	})
+	
+	
 	const optiones = [{
 			value: '2',
 			label: '2',
@@ -181,37 +225,7 @@
 			type: "已启用",
 			regname: "xn18096012008",
 			regtime: "2021-06-23T15:08:39"
-		},
-		{
-				date: '01',
-				name: 'Liu461185',
-				address: '安顺市顺安防雷安全检测站平坝分站',
-				number: "91520421MA6EBM14XC",
-				time: "2021-06-22T12:52:17",
-				type: "已启用",
-				regname: "xn18096012008",
-				regtime: "2021-06-23T15:08:39"
-			},
-			{
-				date: '02',
-				name: 'Liu461185',
-				address: '安顺市顺安防雷安全检测站平坝分站',
-				number: "91520421MA6EBM14XC",
-				time: "2021-06-22T12:52:17",
-				type: "已启用",
-				regname: "xn18096012008",
-				regtime: "2021-06-23T15:08:39"
-			},
-			{
-				date: '03',
-				name: 'Liu461185',
-				address: '安顺市顺安防雷安全检测站平坝分站',
-				number: "91520421MA6EBM14XC",
-				time: "2021-06-22T12:52:17",
-				type: "已启用",
-				regname: "xn18096012008",
-				regtime: "2021-06-23T15:08:39"
-			}
+		}
 	]
 </script>