活动介绍
file-type

QueryForm Database Tool:Java/Swing关系数据库前端应用

ZIP文件

下载需积分: 50 | 297KB | 更新于2024-11-18 | 159 浏览量 | 0 下载量 举报 收藏
download 立即下载
这款工具支持多数据库并发连接,能够连接到多种不同的关系数据库系统。使用 QueryForm,用户可以通过图形界面方便地执行查询和管理数据库。查询结果不仅可以查看,还可以导出为 CSV 文件格式,方便与其他系统集成或者用于数据分析。除此之外,结果还可以导出为 INSERT 语句,这对于数据库备份和迁移操作特别有用。该工具为用户提供了一种比传统命令行或脚本更直观、更高效的方式来操作数据库,尤其适合那些需要频繁进行数据查询和管理的用户。" 详细知识点: 1. QueryForm 应用程序概述: QueryForm 是一个用 Java 编程语言开发的工具,它利用了 Swing 库来构建其图形用户界面(GUI)。这意味着 QueryForm 可以在所有主流操作系统上运行,包括 Windows、macOS 和 Linux。作为一个开源项目,它允许用户访问源代码,自由使用、复制、修改和分发,前提是遵循其发布的开源许可证条款。 2. 功能特点: - 多数据库支持:QueryForm 能够与多个关系数据库管理系统(RDBMS)进行交互,如 MySQL、PostgreSQL、Oracle、Microsoft SQL Server 等。这使得它能够成为一个通用的数据库管理工具。 - 并发连接:该工具支持打开多个数据库连接,这对于需要同时处理多个数据库或执行跨数据库查询的情况非常有用。 - 图形用户界面:与其他命令行或脚本驱动的数据库管理工具相比,QueryForm 提供了一个更加用户友好的操作界面,使非技术用户也能高效地管理数据库。 3. 数据操作与导出: - 查询结果查看:QueryForm 允许用户执行查询,并直观地在界面上查看查询结果。 - 导出为 CSV:用户可以将查询结果导出为逗号分隔值(CSV)文件格式。这种格式广泛被电子表格程序如 Microsoft Excel 所支持,也适用于数据导入和导出操作。 - 导出为 INSERT 语句:通过导出为 SQL INSERT 语句,用户可以创建用于数据库备份或迁移的数据插入脚本。 4. 开源许可与支持文档: - GNU General Public License:QueryForm 根据 GPL 许可证发行,这意味着任何人都可以自由地使用和修改代码,但修改后的代码也必须以相同的许可证发布。 - 文档:压缩包内提供的文档,包括 instructions.html、INSTRUCTIONS.TXT 和 REQUIRED_LIBRARIES.TXT 等文件,为用户提供使用工具和安装必需库的说明。 - 许可证文件:LICENSE.TXT 文件包含了完整的开源许可证文本,确保用户了解自己的使用权利和义务。 5. 使用场景与用户群体: - 数据库管理员:对于数据库管理员来说,QueryForm 是一个能够简化日常数据库管理任务的有力工具。 - 数据分析师:数据分析师可以利用 QueryForm 高效地从数据库中提取数据,并将其导出至 CSV 文件中进行进一步分析。 - 开发者:开发者可以利用 QueryForm 作为调试数据库操作的工具,或者在开发过程中轻松地执行数据库查询。 6. 技术架构与开发环境: - Java/Swing:QueryForm 使用 Java 作为编程语言,Swing 作为用户界面框架。因此,开发者在编写和维护代码时需要对 Java 开发环境和 Swing 组件有深入的理解。 - 数据库连接:QueryForm 可能会使用 JDBC(Java Database Connectivity)来实现与各种数据库的连接和通信。 7. 扩展性与社区支持: - 开源社区:作为开源软件,QueryForm 很可能拥有一个活跃的社区支持,社区成员可以贡献代码、报告错误、分享使用经验,并参与讨论。 - 自定义和扩展:开发者社区可能会为 QueryForm 创建插件或扩展,以增强其功能或提供对新数据库系统的支持。 综上所述,QueryForm Database Tool 是一款功能强大的开源数据库管理工具,它利用 Java/Swing 技术构建了一个用户友好的前端界面,并支持多数据库连接和多种数据操作功能。该工具对于需要高效管理关系数据库的用户来说是一个宝贵的资源。

相关推荐

filetype

<template>
<a-card :bordered="false" style="margin-bottom: 10px;">
</a-card> <a-card :bordered="false" > <bt-inventory-add-form v-if="showAddModal" ref="btInventoryAddForm" :contractId="contractId" @ok="getList" @close="showAddModal = false" /> <bt-inventory-edit-form v-if="showEditModal" ref="btInventoryEditForm" :contractId="contractId" @ok="getList" @close="showEditModal = false" />
<a-tooltip title="刷新"> <a-icon @click="getList" class="action" :type="loading ? 'loading' : 'reload'" /> </a-tooltip>
<a-table :loading="loading" rowKey="id" size="middle" @change="handleTableChange" @refresh="getList" :columns="columns" :data-source="btInventoryList" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :pagination="false" > </a-table> </a-card>

暂无相关库存数据 <a-tag v-if="isOutbound" color="green" style="margin-left:8px;">已出库</a-tag>

</template> <script> import { listBtInventory, delBtInventory, exportBtInventory } from '@/api/tt/Inventory' import AdvanceTable from '@/components/pt/table/AdvanceTable' import BtInventoryAddForm from '@/views/bt/btoutbound/modules/BtInventoryAddForm' import BtInventoryEditForm from '@/views/bt/btoutbound/modules/BtInventoryEditForm' export default { name: 'BtInventory', props: { isOutbound: { type: Boolean, default: false, // 默认不显示“已出库” }, contractId: { type: String, required: true }, title: { type: String, default: '子表' } },watch: { hasData: { immediate: true, handler(newVal) { if (!newVal && !this.isOutbound) { this.$emit('outbound-status', true); this.isOutbound = true; } } } }, components: { AdvanceTable, BtInventoryAddForm, BtInventoryEditForm }, data () { return { hasData:false, showAddModal: false, showEditModal: false, // 遮罩层 loading: true, // 选中数组 ids: [], // 选中的主键集合 selectedRowKeys: [], // 选中的数据集合 selectedRows: [], // 高级搜索 展开/关闭 advanced: false, // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 总条数 total: 0, // label的百分比 labelCol: { span: 6 }, // 内容区域的百分比 wrapperCol: { span: 18 }, // 合同管理表格数据 btInventoryList: [], // 查询参数 queryParam: { pageNum: 1, pageSize: 1000, itemName: undefined, description: undefined, quantity: undefined, beginIndate: undefined }, columns: [ { title: '物资名称', dataIndex: 'itemName', ellipsis: true, align: 'left', width: '12.8%' }, { title: '规格型号', dataIndex: 'description', ellipsis: true, align: 'left', width: '12.8%' }, { title: '总库存', dataIndex: 'fulfilledQuantity', align: 'right', width: '12.8%' }, { title: '当前库存数量', dataIndex: 'quantity', align: 'right', width: '12.8%' }, { title: '入库日期', dataIndex: 'indate', align: 'center', width: '12.8%' }, // { // title: '操作', // dataIndex: 'operation', // align: 'center', // width: '10%', // scopedSlots: { customRender: 'operation' } // } ] } }, created () { this.getList() }, methods: { /** 查询合同管理列表 */ getList () { this.loading = true this.queryParam.contractId = this.contractId listBtInventory(this.queryParam).then(response => { this.btInventoryList = response.data.list this.total = response.data.total this.loading = false if(this.btInventoryList.length > 0){ this.hasData = true }else{ this.hasData = false } }) }, /** 搜索按钮操作 */ handleQuery () { this.queryParam.pageNum = 1 this.getList() }, /** 重置按钮操作 */ resetQuery () { this.queryParam = { pageNum: 1, pageSize: 1000, itemName: undefined, description: undefined, quantity: undefined, beginIndate: undefined } this.handleQuery() }, /** 翻页操作 */ onShowSizeChange (current, pageSize) { this.queryParam.pageSize = pageSize this.getList() }, /** 翻页操作 */ onSizeChange (current, size) { this.queryParam.pageNum = 1 this.queryParam.pageSize = size this.getList() }, /** 翻页操作 */ changeSize (current, pageSize) { this.queryParam.pageNum = current this.queryParam.pageSize = pageSize this.getList() }, /** 翻页操作 */ onSelectChange (selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys this.selectedRows = selectedRows this.ids = this.selectedRows.map(item => item.id) this.single = selectedRowKeys.length !== 1 this.multiple = !selectedRowKeys.length }, /** 查询折叠和展开操作 */ toggleAdvanced () { this.advanced = !this.advanced }, handleAdd () { this.showAddModal = true this.$nextTick(() => ( this.$refs.btInventoryAddForm.handleAdd() )) }, handleUpdate (record, ids) { this.showEditModal = true this.$nextTick(() => ( this.$refs.btInventoryEditForm.handleUpdate(record, ids) )) }, /** 删除按钮操作 */ handleDelete (row) { var that = this const btInventoryIds = row.id || this.ids this.$confirm({ title: '确认删除所选中数据?', onOk () { return delBtInventory(btInventoryIds) .then(() => { that.onSelectChange([], []) that.getList() that.$message.success( '删除成功', 3 ) }) }, onCancel () {} }) }, /** 导出按钮操作 */ handleExport () { var that = this this.$confirm({ title: '是否确认导出?', content: '此操作将导出当前条件下所有数据而非选中数据', onOk () { return exportBtInventory(that.queryParam) .then(response => { that.download(response.msg) that.$message.success( '导出成功', 3 ) }) }, onCancel () {} }) }, handleTableChange (pagination, filters, sorter) { if (sorter.field !== undefined && sorter.field !== null && sorter.field !== '') { this.queryParam.orderByColumn = 'a.' + sorter.field this.queryParam.isAsc = sorter.order } this.getList() } } } </script> <style scoped> .empty-container { padding: 20px; text-align: center; background: #fff; border-radius: 4px; } .action { font-size: 16px; cursor: pointer; margin-left: 8px; } .action:hover { color: #1890ff; } </style><template>
<a-card :bordered="false" style="margin-bottom: 10px;">
<a-form :labelCol="labelCol" :wrapperCol="wrapperCol" ref="queryForm"> <a-row :gutter="32"> <a-col :span="6" > <a-form-item label="合同名称"> <a-input v-model="queryParam.contractName" placeholder="请输入合同名称" allow-clear @keyup.enter.native="handleQuery"/> </a-form-item> </a-col> <a-col :span="6" > <a-form-item label="合同正式编号"> <a-input v-model="queryParam.contractId" placeholder="请输入合同正式编号" allow-clear @keyup.enter.native="handleQuery"/> </a-form-item> </a-col> <a-col :span="6" > <a-form-item label="对方签约单位"> <a-input v-model="queryParam.counterpartContractUnit" placeholder="请输入对方签约单位" allow-clear @keyup.enter.native="handleQuery"/> </a-form-item> </a-col> <a-col> <a-button type="primary" @click="handleQuery"><a-icon type="search" />查询</a-button> <a-button style="margin-left: 8px" @click="resetQuery"><a-icon type="redo" />重置</a-button> {{ advanced ? '收起' : '展开' }} <a-icon :type="advanced ? 'up' : 'down'"/> </a-col> </a-row> </a-form>
</a-card> <a-card :bordered="false" class="table-card"> <bt-contracts-detailed-add-form v-if="showAddModal" ref="contractmanageAddForm" :firstContractTypeOptions="firstContractTypeOptions" :secondContractTypeOptions="secondContractTypeOptions" :sealTypeOptions="sealTypeOptions" :signTypeOptions="signTypeOptions" @ok="getList" @close="showAddModal = false" /> <bt-contracts-detailed-edit-form v-if="showEditModal" ref="contractmanageEditForm" :firstContractTypeOptions="firstContractTypeOptions" :secondContractTypeOptions="secondContractTypeOptions" :sealTypeOptions="sealTypeOptions" :signTypeOptions="signTypeOptions" @ok="getList" @close="showEditModal = false" /> <BtLiveEidt v-if="showLiveModal" ref="liveEidt" :firstContractTypeOptions="firstContractTypeOptions" :secondContractTypeOptions="secondContractTypeOptions" :sealTypeOptions="sealTypeOptions" :signTypeOptions="signTypeOptions" @ok="getList" @close="showLiveModal = false" /> <outBound v-if="visible" ref="outBoundref" @close="onClose" /> <advance-table title="出库管理" :pagination="{ current: queryParam.pageNum, pageSize: queryParam.pageSize, total: total, showSizeChanger: true, showLessItems: true, showQuickJumper: true, showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条,总计 ${total} 条`, onChange: changeSize, onShowSizeChange: onShowSizeChange }" tableKey="base-contractmanage-index-table" @change="handleTableChange" rowKey="id" size="middle" @refresh="getList" :columns="columns" :data-source="contractmanageList" :loading="loading" :format-conditions="true" :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" > <bt-inventory-index ref="BtInventoryIndex" title="子表" :contractId="record.id" @outbound-status="(status) => handleOutboundStatus(record, status)" /> {{ firstContractTypeFormat(record) }} {{ secondContractTypeFormat(record) }} {{ sealTypeFormat(record) }} {{ signTypeFormat(record) }} <a-radio-group default-value="a" size="small"> <a-button type="primary" @click="handleUpdate1(record)" v-hasPermi="['bt:btOutbound:edit']" :size="size" ghost> <a-icon type="upload" />生活出库 </a-button> | <a-button type="primary" @click="handleUpdate(record)" v-hasPermi="['bt:btOutbound:edit']" :size="size" > <a-icon type="upload" />生产出库 </a-button> | <a-button type="dashed" @click="showDrawer(record)" v-hasPermi="['bt:btOutbound:list']" :size="size"> <a-icon type="table" />出库记录 </a-button> <a-button v-if="record.hasOutbound" type="danger" @click="resetOutboundStatus(record)" :size="size" > <a-icon type="undo" />重置为未出库 </a-button> </a-radio-group> <a-tag v-if="record.hasOutbound" color="green">已出库</a-tag> <a-tag v-else color="orange">未出库</a-tag> </advance-table> </a-card>
</template> <script> import { listBtContractsDetailed, delBtContractsDetailed, exportBtContractsDetailed, getInitData } from '@/api/tt/ContractsDetailed' import AdvanceTable from '@/components/pt/table/AdvanceTable' import BtContractsDetailedAddForm from '@/views/bt/btoutbound/modules/BtContractsDetailedAddForm' import BtContractsDetailedEditForm from '@/views/bt/btoutbound/modules/BtContractsDetailedEditForm' import BtInventoryIndex from '@/views/bt/btoutbound/BtInventoryIndex' import outBound from '@/views/bt/btoutbound/outbound/index.vue' import BtLiveEidt from './modules/BtLiveEidt.vue' export default { name: 'BtoutBound', components: { AdvanceTable, BtInventoryIndex, outBound, BtContractsDetailedAddForm, BtContractsDetailedEditForm, BtLiveEidt }, data () { return { size:'small', visible: false, showAddModal: false, showEditModal: false, showLiveModal: false, // 遮罩层 loading: true, // 选中数组 ids: [], // 选中的主键集合 selectedRowKeys: [], // 选中的数据集合 selectedRows: [], // 高级搜索 展开/关闭 advanced: false, // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 总条数 total: 0, // label的百分比 labelCol: { span: 6 }, // 内容区域的百分比 wrapperCol: { span: 18 }, // 合同管理表格数据 contractmanageList: [], // 一级合同类型字典 firstContractTypeOptions: [], // 二级合同类型字典 secondContractTypeOptions: [], // 用章类别字典 sealTypeOptions: [], // 签署类型字典 signTypeOptions: [], outBoundId: 0, // 查询参数 queryParam: { pageNum: 1, pageSize: 10, contractName: undefined, contractId: undefined, organizer: undefined, counterpartContractUnit: undefined }, columns: [ { title: '合同分类', dataIndex: 'contractClassification', ellipsis: true, align: 'left', width: '12.8%' }, { title: '合同名称', dataIndex: 'contractName', ellipsis: true, align: 'left', width: '12.8%' }, { title: '合同正式编号', dataIndex: 'contractId', ellipsis: true, align: 'left', width: '12.8%' }, { title: '采购方式', dataIndex: 'procurementMethod', ellipsis: true, align: 'left', width: '12.8%' }, { title: '对方签约单位', dataIndex: 'counterpartContractUnit', ellipsis: true, align: 'left', width: '12.8%' }, { title: '我方签订日期', dataIndex: 'ourSignDate', ellipsis: true, align: 'left', width: '12.8%' }, { title: '合同总金额', dataIndex: 'totalContractAmount', ellipsis: true, align: 'left', width: '12.8%' }, { title: '删除作废', dataIndex: 'deletedOrVoided', ellipsis: true, align: 'left', width: '12.8%' }, { title: '出库状态', dataIndex: 'hasOutbound', align: 'center', width: '10%', customRender: (text, record) => { return record.hasOutbound ? <a-tag color="green">已出库</a-tag> : <a-tag color="orange">未出库</a-tag>; } }, { title: '操作', dataIndex: 'operation', align: 'center', width: '60%', scopedSlots: { customRender: 'operation' } } ] } }, created () { this.getList() getInitData('contract_type_level1,contract_type_level2,sys_oper_type,sys_oper_type').then(response => { this.firstContractTypeOptions = response.data.contract_type_level1 this.secondContractTypeOptions = response.data.contract_type_level2 this.sealTypeOptions = response.data.sys_oper_type this.signTypeOptions = response.data.sys_oper_type }) }, methods: { resetOutboundStatus(record) { const index = this.contractmanageList.findIndex(item => item.id === record.id); if (index !== -1) { this.$set(this.contractmanageList[index], 'hasOutbound', false); // 更新前端状态 localStorage.removeItem(`outbound_${record.id}`); // 清除 localStorage 存储 this.$message.success("已重置为未出库"); } }, handleOutboundStatus(record, status) { const index = this.contractmanageList.findIndex(item => item.id === record.id); if (index !== -1 && status && !this.contractmanageList[index].hasOutbound) { this.$set(this.contractmanageList[index], 'hasOutbound', true); localStorage.setItem(`outbound_${record.id}`, 'true'); // 存储到 localStorage } }, onClose () { this.visible = false this.$emit('close') }, showDrawer(record) { this.visible = true const that = this that.$nextTick(() => ( that.$refs.outBoundref.handleList(record) )) }, // onClose() { // this.visible = false; // }, /** 查询合同管理列表 */ getList () { this.loading = true; listBtContractsDetailed(this.queryParam).then(response => { this.contractmanageList = response.data.list.map(item => { // 从 localStorage 读取是否已出库 const storedOutbound = localStorage.getItem(`outbound_${item.id}`); return { ...item, hasOutbound: storedOutbound === 'true' || false, }; }); this.total = response.data.total; this.loading = false; }); }, // 一级合同类型字典翻译 firstContractTypeFormat (row) { if (row.firstContractType) { return this.selectDictLabel(this.firstContractTypeOptions, row.firstContractType) } else { return '' } }, // 二级合同类型字典翻译 secondContractTypeFormat (row) { if (row.secondContractType) { return this.selectDictLabel(this.secondContractTypeOptions, row.secondContractType) } else { return '' } }, // 用章类别字典翻译 sealTypeFormat (row) { if (row.sealType) { return this.selectDictLabel(this.sealTypeOptions, row.sealType) } else { return '' } }, // 签署类型字典翻译 signTypeFormat (row) { if (row.signType) { return this.selectDictLabel(this.signTypeOptions, row.signType) } else { return '' } }, /** 搜索按钮操作 */ handleQuery () { this.queryParam.pageNum = 1 this.getList() }, /** 重置按钮操作 */ resetQuery () { this.queryParam = { pageNum: 1, pageSize: 10, contractName: undefined, contractId: undefined, organizer: undefined, counterpartContractUnit: undefined } this.handleQuery() }, /** 翻页操作 */ onShowSizeChange (current, pageSize) { this.queryParam.pageSize = pageSize this.getList() }, /** 翻页操作 */ onSizeChange (current, size) { this.queryParam.pageNum = 1 this.queryParam.pageSize = size this.getList() }, /** 翻页操作 */ changeSize (current, pageSize) { this.queryParam.pageNum = current this.queryParam.pageSize = pageSize this.getList() }, /** 翻页操作 */ onSelectChange (selectedRowKeys, selectedRows) { this.selectedRowKeys = selectedRowKeys this.selectedRows = selectedRows this.ids = this.selectedRows.map(item => item.id) this.single = selectedRowKeys.length !== 1 this.multiple = !selectedRowKeys.length }, /** 查询折叠和展开操作 */ toggleAdvanced () { this.advanced = !this.advanced }, handleAdd () { this.showAddModal = true this.$nextTick(() => ( this.$refs.contractmanageAddForm.handleAdd() )) }, //生活导出 handleUpdate1 (record, ids) { this.showLiveModal = true this.$nextTick(() => ( this.$refs.liveEidt.handleUpdate(record, ids) )) }, handleUpdate (record, ids) { this.showEditModal = true this.$nextTick(() => ( this.$refs.contractmanageEditForm.handleUpdate(record, ids) )) }, /** 删除按钮操作 */ handleDelete (row) { var that = this const contractmanageIds = row.id || this.ids this.$confirm({ title: '确认删除所选中数据?', onOk () { return delBtContractsDetailed(contractmanageIds) .then(() => { that.onSelectChange([], []) that.getList() that.$message.success( '删除成功', 3 ) }) }, onCancel () {} }) }, /** 导出按钮操作 */ handleExport () { var that = this this.$confirm({ title: '是否确认导出?', content: '此操作将导出当前条件下所有数据而非选中数据', onOk () { return exportBtContractsDetailed(that.queryParam) .then(response => { that.download(response.msg) that.$message.success( '导出成功', 3 ) }) }, onCancel () {} }) }, handleTableChange (pagination, filters, sorter) { if (sorter.field !== undefined && sorter.field !== null && sorter.field !== '') { this.queryParam.orderByColumn = 'a.' + sorter.field this.queryParam.isAsc = sorter.order } this.getList() } } } </script> 进行修改,我现在的未出库和已出库是存储在客户端,但现在要改成存储到数据库里,/** * 修改合同管理 */ @PreAuthorize("@ss.hasPermi('bt:btOutbound:edit')") @Log(title = "合同管理", businessType = BusinessType.UPDATE) @PutMapping public R edit(@RequestBody @Validated ContractsDetailed btContractsDetailed) { return R.status(btContractsDetailedService.save(btContractsDetailed)); }存储时调用这个接口里的 `ecc_transfer` varchar(50) DEFAULT NULL COMMENT '传输ECC', 这个字段,直接存储汉字

filetype

如下述代码1,是一个弹窗的代码页面(如图1所示),调整一下左侧的"SQL查询",当分辨率高变形的有点厉害了,请参照代码2中的样式所示,请优化"SQL查询"的样式,并完整的写出修改后的代码(不改变代码1中的功能,即"sql查询"框中能够输入sql语句不变) ### 代码1:src\views\handle\dataset\add\AddView.vue ```vue <template>
<el-container class="layout-container"> <el-aside width="40%" class="config-aside">

<el-icon><setting /></el-icon> SQL数据集配置

<el-form :model="form" :rules="rules" label-position="top" class="config-form" ref="formRef" > <el-form-item v-if="props.id===''" label="数据集名称" prop="name" class="form-item-card inline-form-item"> <el-input v-model="form.name" placeholder="例如: 用户行为分析数据集" size="large" :prefix-icon="Document" /> </el-form-item> <el-form-item label="SQL查询" prop="sql" class="form-item-card sql-editor-item">
<VAceEditor v-model:value="form.sql" lang="sql" theme="github" style="height: 300px; width: 100%" :options="{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, highlightActiveLine: true, showLineNumbers: true, tabSize: 2, }" />
<el-tag type="info" size="small"> <el-icon><info-filled /></el-icon> 提示: 请确保SQL语法正确且符合数据源规范 </el-tag>
</el-form-item> </el-form>
</el-aside> <el-main class="preview-main">

<el-icon><data-line /></el-icon> 数据预览

<el-button type="warning" plain size="small" @click="emit('cancel')" :icon="Close">取消</el-button> <el-button type="success" plain size="small" :disabled="!form.sql" @click="fetchPreviewData" :icon="Refresh">执行SQL预览</el-button> <el-button type="primary" plain size="small" @click="handleSave" :icon="Check">保存</el-button>
<zr-table :tableModule="tableModule" />
</el-main> </el-container>
</template> <script setup> import {ref, reactive, onMounted, getCurrentInstance} from 'vue' import { VAceEditor } from 'vue3-ace-editor' import '@/components/CodeEdit/ace-config.js' import { Setting, DataLine, Document, Refresh, Check, Close, InfoFilled, Edit, Download } from '@element-plus/icons-vue' import ZrTable from "@/components/ZrTable/index.vue"; import {buildFilterSos} from "@/components/ZrTable/table.js"; import { handleDataSetCreate, handleDataSetGet, handleDataSetPreviewData, handleDataSetReconstruct } from "@/api/handle/dataset.js"; const { proxy } = getCurrentInstance() const props = defineProps({ sceneId:{ type: String, default: '', }, id:{ type: String, default: '', } }) const emit = defineEmits(['saved', 'cancel']) const form = ref({ id:props.id, name: '', sceneId:props.sceneId, type:'view', sql: '', info:'', }) //数据预览 const columnsData= ref([]) const queryData = ref([]) const state = reactive({ columns: columnsData, // 表格配置 query: queryData, // 查询条件配置 queryForm: {}, // 查询form表单 loading: false, // 加载状态 dataList: [], // 列表数据 pages:false, }) const { loading, dataList, columns, pages, query, queryForm } = toRefs(state) const formRef = ref(null) // 预览数据 // 传给子组件的 const tableModule = ref({ callback: fetchPreviewData, // 回调,子组件中可以看到很多调用callback的,这里对应的是获取列表数据的方法 // 以下不说了,上面都给解释了 queryForm, columns, dataList, loading, pages, query, }) const rules = reactive({ name: [ { required: true, message: '请输入数据集名称', trigger: 'blur' }, { max: 50, message: '名称长度不能超过50个字符', trigger: 'blur' } ], sql: [ { required: true, message: '请输入SQL查询语句', trigger: 'blur' }, { validator: (rule, value, callback) => { if (!value || !value.trim()) { callback(new Error('SQL不能为空')) } else if (!value.toLowerCase().includes('select')) { callback(new Error('SQL必须是SELECT查询语句')) } else { callback() } }, trigger: 'blur' } ] }) async function fetchPreviewData() { state.loading = true const valid = await formRef.value.validate() if (!valid) { proxy.$modal.msgError("校验错误,请修改好再次执行") return } // 掉自己的接口,切勿复制粘贴 handleDataSetPreviewData({ sql:form.value.sql }).then((res) => { if (res.success) { if(res.data.pageData.length>0){ for (let key in res.data.pageData[0]) { columnsData.value.push({prop: key, label:key, align: 'center',show:1}) } } state.dataList = res.data.pageData proxy.$modal.msgSuccess('SQL执行成功') } else { proxy.$modal.msgError(res.message) } }) state.loading = false } const handleSave = async () => { const valid = await formRef.value.validate() if (!valid) return form.value.info=JSON.stringify({ sql:form.value.sql }) const method=form.value.id===""?handleDataSetCreate:handleDataSetReconstruct method(form.value).then((res) => { if (res.success) { emit('saved',{id: res.data }) } else { proxy.$modal.msgError(res.message) } }) } watch(() => props.id, (newid, oldid) => { if (newid !== oldid && newid!=="") { // 引用变化时触发 handleDataSetGet(newid).then((res) => { if(res.success){ form.value.sql=JSON.parse(res.data.info)?.sql; } }) } }, { immediate: true } // 注意:不要用 deep: true ); </script> <style scoped lang="scss"> .sql-dataset-container { height: calc(90vh - 60px); padding: 20px; background-color: #f5f7fa; } .layout-container { height: 100%; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; } .config-aside { background: #f9fafc; border-right: 1px solid var(--el-border-color-light); padding: 24px; display: flex; flex-direction: column; } .preview-main { padding: 24px; background: #fff; display: flex; flex-direction: column; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; h2 { margin: 0; color: var(--el-text-color-primary); font-weight: 600; font-size: 18px; display: flex; align-items: center; gap: 8px; } .header-left, .header-right { display: flex; align-items: center; } } .preview-content { flex: 1; border: 1px solid var(--el-border-color-light); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .config-form { flex: 1; display: flex; flex-direction: column; :deep(.el-form-item) { margin-bottom: 20px; &.inline-form-item { :deep(.el-form-item__label) { display: inline-flex; align-items: center; width: auto; margin-right: 12px; padding-bottom: 0; } :deep(.el-form-item__content) { display: inline-flex; flex: 1; } } .el-form-item__label { font-weight: 500; padding-bottom: 8px; color: var(--el-text-color-regular); font-size: 14px; } } } .form-item-card { background: #fff; padding: 16px; border-radius: 8px; border-left: 3px solid var(--el-color-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); } .sql-editor-item { flex: 1; display: flex; flex-direction: column; :deep(.el-form-item__content) { flex: 1; display: flex; flex-direction: column; } } .sql-editor-container { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--el-border-color-light); border-radius: 4px; overflow: hidden; } .sql-tips { padding: 8px 12px; background: var(--el-color-info-light-9); border-top: 1px solid var(--el-border-color-light); .el-tag { width: 100%; justify-content: flex-start; .el-icon { margin-right: 6px; } } } .form-actions { margin-top: 24px; padding-top: 16px; display: flex; justify-content: flex-end; gap: 16px; border-top: 1px dashed var(--el-border-color); } .refresh-btn { :deep(.el-icon) { margin-right: 6px; } } @media (max-width: 992px) { .layout-container { flex-direction: column; } .config-aside { width: 100% !important; border-right: none; border-bottom: 1px solid var(--el-border-color-light); } } </style> ``` ### 代码2:src\views\handle\dataset\add\AddView.vue ```vue <template>
<el-container class="layout-container"> <el-aside class="config-aside">

<el-icon><setting /></el-icon> SQL数据集配置

<el-form :model="form" :rules="rules" label-position="top" class="config-form" ref="formRef" > <el-form-item v-if="props.id === ''" label="数据集名称" prop="name" class="form-item-card inline-form-item"> <el-input v-model="form.name" placeholder="例如: 用户行为分析数据集" size="large" :prefix-icon="Document" /> </el-form-item> <el-form-item label="SQL查询" prop="sql" class="form-item-card sql-editor-item">
<VAceEditor v-model:value="form.sql" lang="sql" theme="github" style="height: 100%; width: 100%" :options="{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, highlightActiveLine: true, showLineNumbers: true, tabSize: 2, }" />
<el-tag type="info" size="small"> <el-icon><info-filled /></el-icon> 提示: 请确保SQL语法正确且符合数据源规范 </el-tag>
</el-form-item> </el-form>
</el-aside> <el-main class="preview-main">

<el-icon><data-line /></el-icon> 数据预览

<el-button type="warning" plain size="small" @click="emit('cancel')" :icon="Close">取消</el-button> <el-button type="success" plain size="small" :disabled="!form.sql" @click="fetchPreviewData" :icon="Refresh">执行SQL预览</el-button> <el-button type="primary" plain size="small" @click="handleSave" :icon="Check">保存</el-button>
<zr-table :tableModule="tableModule" />
</el-main> </el-container>
</template> <script setup> import {ref, reactive, onMounted, getCurrentInstance, watch} from 'vue' import { VAceEditor } from 'vue3-ace-editor' import '@/components/CodeEdit/ace-config.js' import { Setting, DataLine, Document, Refresh, Check, Close, InfoFilled, Edit, Download } from '@element-plus/icons-vue' import ZrTable from "@/components/ZrTable/index.vue"; import {buildFilterSos} from "@/components/ZrTable/table.js"; import { handleDataSetCreate, handleDataSetGet, handleDataSetPreviewData, handleDataSetReconstruct } from "@/api/handle/dataset.js"; const { proxy } = getCurrentInstance() const props = defineProps({ sceneId:{ type: String, default: '', }, id:{ type: String, default: '', } }) const emit = defineEmits(['saved', 'cancel']) const form = ref({ id:props.id, name: '', sceneId:props.sceneId, type:'view', sql: '', info:'', }) //数据预览 const columnsData= ref([]) const queryData = ref([]) const state = reactive({ columns: columnsData, // 表格配置 query: queryData, // 查询条件配置 queryForm: {}, // 查询form表单 loading: false, // 加载状态 dataList: [], // 列表数据 pages:false, }) const { loading, dataList, columns, pages, query, queryForm } = toRefs(state) const formRef = ref(null) // 预览数据 // 传给子组件的 const tableModule = ref({ callback: fetchPreviewData, // 回调,子组件中可以看到很多调用callback的,这里对应的是获取列表数据的方法 // 以下不说了,上面都给解释了 queryForm, columns, dataList, loading, pages, query, }) const rules = reactive({ name: [ { required: true, message: '请输入数据集名称', trigger: 'blur' }, { max: 50, message: '名称长度不能超过50个字符', trigger: 'blur' } ], sql: [ { required: true, message: '请输入SQL查询语句', trigger: 'blur' }, { validator: (rule, value, callback) => { if (!value || !value.trim()) { callback(new Error('SQL不能为空')) } else if (!value.toLowerCase().includes('select')) { callback(new Error('SQL必须是SELECT查询语句')) } else { callback() } }, trigger: 'blur' } ] }) async function fetchPreviewData() { state.loading = true const valid = await formRef.value.validate() if (!valid) { proxy.$modal.msgError("校验错误,请修改好再次执行") return } // 掉自己的接口,切勿复制粘贴 handleDataSetPreviewData({ sql:form.value.sql }).then((res) => { if (res.success) { columnsData.value = []; // 重置列数据 if(res.data.pageData.length>0){ for (let key in res.data.pageData[0]) { columnsData.value.push({prop: key, label:key, align: 'center',show:1}) } } state.dataList = res.data.pageData proxy.$modal.msgSuccess('SQL执行成功') } else { proxy.$modal.msgError(res.message) } }) state.loading = false } const handleSave = async () => { const valid = await formRef.value.validate() if (!valid) return form.value.info=JSON.stringify({ sql:form.value.sql }) const method=form.value.id===""?handleDataSetCreate:handleDataSetReconstruct method(form.value).then((res) => { if (res.success) { emit('saved',{id: res.data }) } else { proxy.$modal.msgError(res.message) } }) } watch(() => props.id, (newid, oldid) => { if (newid !== oldid && newid!=="") { // 引用变化时触发 handleDataSetGet(newid).then((res) => { if(res.success){ form.value.sql=JSON.parse(res.data.info)?.sql; } }) } }, { immediate: true } // 注意:不要用 deep: true ); </script> <style scoped lang="scss"> .sql-dataset-container { height: calc(90vh - 60px); padding: 16px; background-color: #f5f7fa; } .layout-container { height: 100%; background: #fff; border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; /* 使用flex横向布局 */ flex-direction: row; /* 横向排列 */ } .config-aside { background: #f9fafc; border-right: 1px solid var(--el-border-color-light); /* 右侧边框分隔 */ padding: 18px; display: flex; flex-direction: column; width: 50%; /* 左侧占50%宽度 */ min-width: 300px; /* 最小宽度限制 */ } .preview-main { padding: 18px; background: #fff; display: flex; flex-direction: column; flex: 1; /* 右侧占剩余宽度 */ min-width: 300px; /* 最小宽度限制 */ } .section-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; h2 { margin: 0; color: var(--el-text-color-primary); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } } .preview-content { flex: 1; border: 1px solid var(--el-border-color-light); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; min-height: 250px; } .config-form { flex: 1; display: flex; flex-direction: column; :deep(.el-form-item) { margin-bottom: 16px; } } .form-item-card { background: #fff; padding: 12px; border-radius: 6px; border-left: 2px solid var(--el-color-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } .sql-editor-container { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--el-border-color-light); border-radius: 4px; overflow: hidden; min-height: 220px; max-height: 400px; } .sql-tips { padding: 6px 10px; background: var(--el-color-info-light-9); border-top: 1px solid var(--el-border-color-light); .el-tag { width: 100%; justify-content: flex-start; font-size: 11px; padding: 4px 8px; } } /* 响应式调整 */ @media (max-width: 992px) { .layout-container { flex-direction: column; /* 小屏幕下改为纵向布局 */ } .config-aside, .preview-main { width: 100%; /* 占满宽度 */ min-width: auto; /* 取消最小宽度限制 */ } .config-aside { border-right: none; border-bottom: 1px solid var(--el-border-color-light); /* 底部边框分隔 */ max-height: 50%; /* 限制最大高度 */ } .sql-dataset-container { padding: 12px; height: auto; min-height: 100vh; } .section-header { flex-direction: column; align-items: stretch; .header-left, .header-right { width: 100%; } .header-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } } .sql-editor-container { max-height: 250px; min-height: 180px; } } @media (max-width: 768px) { .preview-content { min-height: 200px; } .section-header { gap: 8px; h2 { font-size: 15px; } } .header-right { grid-template-columns: repeat(2, 1fr) !important; .el-button { width: 100%; margin: 0 !important; } .el-button:last-child { grid-column: span 2; } } } @media (max-width: 480px) { .sql-dataset-container { padding: 8px; } .config-aside, .preview-main { padding: 12px; } .sql-editor-container { min-height: 150px; max-height: 200px; } .form-item-card { padding: 8px; } .el-input, .el-button { font-size: 13px !important; } } </style> ```

filetype

<template>
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="150px"> <el-form-item label="采集数据提交的时间"> <el-date-picker v-model="daterangeTime" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker> </el-form-item> <el-form-item label="采集数据提交的地点" prop="position"> <el-input v-model="queryParams.position" placeholder="请输入采集数据提交的地点" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="采集人员编号" prop="userid"> <el-input v-model="queryParams.userid" placeholder="请输入采集人员编号" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="施工单位" prop="sgdw"> <el-input v-model="queryParams.sgdw" placeholder="请输入施工单位" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="监理单位" prop="jldw"> <el-input v-model="queryParams.jldw" placeholder="请输入监理单位" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="合同号" prop="hth"> <el-input v-model="queryParams.hth" placeholder="请输入合同号" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="编号" prop="bh"> <el-input v-model="queryParams.bh" placeholder="请输入编号" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="工程名称" prop="gcmc"> <el-input v-model="queryParams.gcmc" placeholder="请输入工程名称" clearable @keyup.enter.native="handleQuery" /> </el-form-item> <el-form-item label="施工时间"> <el-date-picker v-model="daterangeSgsj" style="width: 240px" value-format="yyyy-MM-dd" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" ></el-date-picker> </el-form-item> <el-form-item> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> </el-form-item> </el-form> <el-row :gutter="10" class="mb8"> <el-col :span="1.5"> <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['gjstjgjlb:sj32:add']" >新增</el-button> </el-col> <el-col :span="1.5"> <el-button type="success" plain icon="el-icon-edit" size="mini" :disabled="single" @click="handleUpdate" v-hasPermi="['gjstjgjlb:sj32:edit']" >修改</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" plain icon="el-icon-delete" size="mini" :disabled="multiple" @click="handleDelete" v-hasPermi="['gjstjgjlb:sj32:remove']" >删除</el-button> </el-col> <el-col :span="1.5"> <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['gjstjgjlb:sj32:export']" >导出</el-button> </el-col> <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> </el-row> <el-table v-loading="loading" :data="sj32List" @selection-change="handleSelectionChange"> <el-table-column type="selection" width="55" align="center" /> <el-table-column label="ID" align="center" prop="id" /> <el-table-column label="采集数据提交的时间" align="center" prop="time" width="180"> <template slot-scope="scope"> {{ parseTime(scope.row.time, '{y}-{m}-{d}') }} </template> </el-table-column> <el-table-column label="采集数据提交的地点" align="center" prop="position" /> <el-table-column label="采集人员编号" align="center" prop="userid" /> <el-table-column label="施工单位" align="center" prop="sgdw" /> <el-table-column label="监理单位" align="center" prop="jldw" /> <el-table-column label="合同号" align="center" prop="hth" /> <el-table-column label="编号" align="center" prop="bh" /> <el-table-column label="工程名称" align="center" prop="gcmc" /> <el-table-column label="施工时间" align="center" prop="sgsj" width="180"> <template slot-scope="scope"> {{ parseTime(scope.row.sgsj, '{y}-{m}-{d}') }} </template> </el-table-column> <el-table-column label="工程部位-桩号" align="center" prop="gcbwZh" /> <el-table-column label="工程部位-墩台号" align="center" prop="gcbwDth" /> <el-table-column label="工程部位-孔号" align="center" prop="gcbwKh" /> <el-table-column label="钢筋规格" align="center" prop="gjgg" /> <el-table-column label="抽检数量" align="center" prop="cjsl" /> <el-table-column label="代表数量" align="center" prop="dbsl" /> <el-table-column label="生产日期" align="center" prop="scrq" width="180"> <template slot-scope="scope"> {{ parseTime(scope.row.scrq, '{y}-{m}-{d}') }} </template> </el-table-column> <el-table-column label="施工员" align="center" prop="sgy" /> <el-table-column label="专业工程师" align="center" prop="zygcs" /> <el-table-column label="检验结论" align="center" prop="jyjl" /> <el-table-column label="不合格处理" align="center" prop="bhgcl" /> <el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <template slot-scope="scope"> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)" v-hasPermi="['gjstjgjlb:sj32:edit']" >修改</el-button> <el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)" v-hasPermi="['gjstjgjlb:sj32:remove']" >删除</el-button> <el-button size="mini" type="text" icon="el-icon-edit" @click="handleMyExport(scope.row)" >导出</el-button> </template> </el-table-column> </el-table> <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" /> <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body> <template slot="title">
钢筋丝头加工记录表
</template> <el-form ref="form" :model="form" :rules="rules" label-width="0">
施工单位: <el-input v-model="form.sgdw" placeholder="请输入施工单位"></el-input>
合同号: <el-input v-model="form.hth" placeholder="请输入合同号"></el-input>
监理单位: <el-input v-model="form.jldw" placeholder="请输入监理单位"></el-input>
编号: <el-input v-model="form.bh" placeholder="请输入编号"></el-input>
工程名称: <el-input v-model="form.gcmc" placeholder="请输入工程名称"></el-input>
施工时间: <el-date-picker v-model="form.sgsj" type="date" placeholder="选择施工时间" style="width: 100%;"></el-date-picker>
工程部位(桩号、墩台号、孔号): <el-input v-model="form.gcbwZh" placeholder="桩号" style="width: 120px;"></el-input> - <el-input v-model="form.gcbwDth" placeholder="墩台号" style="width: 120px;"></el-input> - <el-input v-model="form.gcbwKh" placeholder="孔号" style="width: 120px;"></el-input>
钢筋规格: <el-input v-model="form.gjgg" placeholder="请输入钢筋规格"></el-input>
抽检数量(根): <el-input-number v-model="form.cjsl" :placeholder="form.cjsl ? '' : '数量'" style="width: 100%;"></el-input-number>
生产日期: <el-date-picker v-model="form.scrq" type="date" placeholder="选择生产日期" style="width: 100%;"></el-date-picker>
代表数量(根): <el-input-number v-model="form.dbsl" :placeholder="form.dbsl ? '' : '数量'" style="width: 100%;"></el-input-number>
施工实际情况
<el-table :data="sgsjqkList" :row-class-name="rowSgsjqkIndex" @selection-change="handleSgsjqkSelectionChange" ref="sgsjqk" style="width: 100%"> <el-table-column type="selection" width="50" align="center" /> <el-table-column label="序号" align="center" prop="index" width="90"/> <el-table-column prop="gjzj" label="钢筋直径" width="130" align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.gjzj" size="small" placeholder="直径(mm)"></el-input> </template> </el-table-column> <el-table-column label="丝头螺纹检验" align="center"> <el-table-column prop="htg" label="环通规" width="110" align="center"> <template slot-scope="scope"> <el-select v-model="scope.row.htg" size="small" placeholder="√/×" style="width: 60px;"> <el-option label="√" value="√"></el-option> <el-option label="×" value="×"></el-option> </el-select> </template> </el-table-column> <el-table-column prop="hzg" label="环止规" width="110" align="center"> <template slot-scope="scope"> <el-select v-model="scope.row.hzg" size="small" placeholder="√/×" style="width: 60px;"> <el-option label="√" value="√"></el-option> <el-option label="×" value="×"></el-option> </el-select> </template> </el-table-column> </el-table-column> <el-table-column label="丝头外观检验" align="center"> <el-table-column prop="yxlwcd" label="有效螺纹长度" width="120" align="center"> <template slot-scope="scope"> <el-select v-model="scope.row.yxlwcd" size="small" placeholder="√/×" style="width: 60px;"> <el-option label="√" value="√"></el-option> <el-option label="×" value="×"></el-option> </el-select> </template> </el-table-column> <el-table-column prop="bwzlw" label="不完整螺纹" width="120" align="center"> <template slot-scope="scope"> <el-select v-model="scope.row.bwzlw" size="small" placeholder="√/×" style="width: 60px;"> <el-option label="√" value="√"></el-option> <el-option label="×" value="×"></el-option> </el-select> </template> </el-table-column> <el-table-column prop="wgjc" label="外观检查" width="150" align="center"> <template slot-scope="scope"> <el-input v-model="scope.row.wgjc" size="small" placeholder="外观情况"></el-input> </template> </el-table-column> </el-table-column> </el-table>
检验结论: <el-input v-model="form.jyjl" placeholder="检验结论"></el-input>
不合格处理: <el-input v-model="form.bhgcl" placeholder="不合格处理"></el-input>
<el-col :span="1.5"> <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAddSgsjqk">添加</el-button> </el-col> <el-col :span="1.5"> <el-button type="danger" icon="el-icon-delete" size="mini" @click="handleDeleteSgsjqk">删除</el-button> </el-col>
施工员: <el-input v-model="form.sgy" placeholder="姓名" style="width: 120px; margin-right: 40px;"></el-input> 专业工程师: <el-input v-model="form.zygcs" placeholder="姓名" style="width: 120px;"></el-input>
</el-form>
<el-button type="primary" @click="submitForm">确 定</el-button> <el-button @click="cancel">取 消</el-button>
</el-dialog>
</template> <script> import { listSj32, getSj32, delSj32, addSj32, updateSj32, exportMyExcel } from "@/api/gjstjgjlb/sj32" export default { name: "Sj32", dicts: ['sys_dui_nodui'], data() { return { // 遮罩层 loading: true, // 选中数组 ids: [], // 子表选中数据 checkedSgsjqk: [], // 非单个禁用 single: true, // 非多个禁用 multiple: true, // 显示搜索条件 showSearch: true, // 总条数 total: 0, // 钢筋丝头加工记录表表格数据 sj32List: [], // 施工实际情况表格数据 sgsjqkList: [], // 弹出层标题 title: "", // 是否显示弹出层 open: false, // 外键时间范围 daterangeTime: [], // 外键时间范围 daterangeSgsj: [], // 查询参数 queryParams: { pageNum: 1, pageSize: 10, time: null, position: null, userid: null, sgdw: null, jldw: null, hth: null, bh: null, gcmc: null, sgsj: null, }, // 表单参数 form: {}, // 表单校验 rules: { } } }, created() { this.getList() }, methods: { /** 查询钢筋丝头加工记录表列表 */ getList() { this.loading = true this.queryParams.params = {} if (null != this.daterangeTime && '' != this.daterangeTime) { this.queryParams.params["beginTime"] = this.daterangeTime[0] this.queryParams.params["endTime"] = this.daterangeTime[1] } if (null != this.daterangeSgsj && '' != this.daterangeSgsj) { this.queryParams.params["beginSgsj"] = this.daterangeSgsj[0] this.queryParams.params["endSgsj"] = this.daterangeSgsj[1] } listSj32(this.queryParams).then(response => { this.sj32List = response.rows this.total = response.total this.loading = false }) }, // 取消按钮 cancel() { this.open = false this.reset() }, // 表单重置 reset() { this.form = { id: null, time: null, position: null, userid: null, sgdw: null, jldw: null, hth: null, bh: null, gcmc: null, sgsj: null, gcbwZh: null, gcbwDth: null, gcbwKh: null, gjgg: null, cjsl: null, dbsl: null, scrq: null, sgy: null, zygcs: null, jyjl: null, bhgcl: null } this.sgsjqkList = [] this.resetForm("form") }, /** 搜索按钮操作 */ handleQuery() { this.queryParams.pageNum = 1 this.getList() }, /** 重置按钮操作 */ resetQuery() { this.daterangeTime = [] this.daterangeSgsj = [] this.resetForm("queryForm") this.handleQuery() }, // 多选框选中数据 handleSelectionChange(selection) { this.ids = selection.map(item => item.id) this.single = selection.length!==1 this.multiple = !selection.length }, /** 新增按钮操作 */ handleAdd() { this.reset() this.open = true this.title = "添加钢筋丝头加工记录表" }, /** 修改按钮操作 */ handleUpdate(row) { this.reset() const id = row.id || this.ids getSj32(id).then(response => { this.form = response.data this.sgsjqkList = response.data.sgsjqkList this.open = true this.title = "修改钢筋丝头加工记录表" }) }, /** 提交按钮 */ submitForm() { this.$refs["form"].validate(valid => { if (valid) { this.form.sgsjqkList = this.sgsjqkList if (this.form.id != null) { updateSj32(this.form).then(response => { this.$modal.msgSuccess("修改成功") this.open = false this.getList() }) } else { addSj32(this.form).then(response => { this.$modal.msgSuccess("新增成功") this.open = false this.getList() }) } } }) }, /** 删除按钮操作 */ handleDelete(row) { const ids = row.id || this.ids this.$modal.confirm('是否确认删除钢筋丝头加工记录表编号为"' + ids + '"的数据项?').then(function() { return delSj32(ids) }).then(() => { this.getList() this.$modal.msgSuccess("删除成功") }).catch(() => {}) }, /** 施工实际情况序号 */ rowSgsjqkIndex({ row, rowIndex }) { row.index = rowIndex + 1 }, /** 施工实际情况添加按钮操作 */ handleAddSgsjqk() { let obj = {} obj.gjzj = "" obj.htg = "" obj.hzg = "" obj.yxlwcd = "" obj.bwzlw = "" obj.wgjc = "" this.sgsjqkList.push(obj) }, /** 施工实际情况删除按钮操作 */ handleDeleteSgsjqk() { if (this.checkedSgsjqk.length == 0) { this.$modal.msgError("请先选择要删除的施工实际情况数据") } else { const sgsjqkList = this.sgsjqkList const checkedSgsjqk = this.checkedSgsjqk this.sgsjqkList = sgsjqkList.filter(function(item) { return checkedSgsjqk.indexOf(item.index) == -1 }) } }, /** 复选框选中数据 */ handleSgsjqkSelectionChange(selection) { this.checkedSgsjqk = selection.map(item => item.index) }, /** 导出按钮操作 */ handleExport() { this.download('gjstjgjlb/sj32/export', { ...this.queryParams }, `sj32_${new Date().getTime()}.xlsx`) }, handleMyExport(row) { const id = row.id exportMyExcel(id).then(response => { this.$modal.msgSuccess("导出成功"); }); } } } </script> 分析以上代码

DeepIndaba
  • 粉丝: 43
上传资源 快速赚钱