254 lines
8.1 KiB
Vue
254 lines
8.1 KiB
Vue
<template>
|
||
<!-- 工器具库 -->
|
||
<el-card class="tool-container">
|
||
<!-- 返回按钮 -->
|
||
<div class="back-container">
|
||
<el-button type="default" size="small" @click="handleBack" class="back-btn">
|
||
返回
|
||
</el-button>
|
||
</div>
|
||
<div class="table-container">
|
||
<TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="toolTableRef"
|
||
:columnsList="columnsList" :request-api="listAPI" :sendParams= "sendParams">
|
||
<template slot="tableTitle">
|
||
<h3>数据列表</h3>
|
||
</template>
|
||
<template slot="tableActions">
|
||
<el-button @click="handleModelExport" v-hasPermi="['enterpriseLibrary:tool:add']"
|
||
class="add-btn">导入模板下载</el-button>
|
||
<el-button @click="handleBathchImport" v-hasPermi="['enterpriseLibrary:tool:import']"
|
||
class="add-btn">批量导入</el-button>
|
||
<el-button @click="handleAdd" v-hasPermi="['enterpriseLibrary:tool:add']" class="add-btn"><i
|
||
class="el-icon-plus"></i> 新增工器具</el-button>
|
||
</template>
|
||
<template slot="deptName" slot-scope="{ data }">
|
||
<span>{{ data.dept.deptName || '--' }}</span>
|
||
</template>
|
||
<template slot="handle" slot-scope="{ data }">
|
||
<el-button type="text" v-hasPermi="['enterpriseLibrary:tool:detail']" class="action-btn"
|
||
@click="handleDetail(data)">
|
||
查看
|
||
</el-button>
|
||
<el-button type="text" v-hasPermi="['enterpriseLibrary:tool:edit']" class="action-btn"
|
||
style="color: #EAA819;" @click="handleUpdate(data)">
|
||
编辑
|
||
</el-button>
|
||
<el-button type="text" v-hasPermi="['enterpriseLibrary:tool:del']" class="action-btn"
|
||
style="color: #DB3E29;" @click="handleDelete(data)">
|
||
删除
|
||
</el-button>
|
||
|
||
</template>
|
||
</TableModel>
|
||
</div>
|
||
|
||
<!-- 添加方案类型弹窗 -->
|
||
<ToolForm ref="toolForm" v-if="isflag" :isAdd="isAdd" :rowData="row" @handleQuery="handleQuery" :title="title"
|
||
@closeDialog="closeDialog" :width="600" />
|
||
<!-- 批量导入弹窗 -->
|
||
<ImportExcelDialog
|
||
:visible.sync="importExcelDialogVisible"
|
||
ref="importExcelDialog"
|
||
title="工器具导入"
|
||
:upload-url="importExcelDialogUploadUrl"
|
||
@upload-success="handleImportSuccess"
|
||
@close="handleImportClose"
|
||
:maxFileTips="maxFileTips"
|
||
:params = "params"
|
||
/>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import TableModel from '@/components/TableModel2'
|
||
import { columnsList, formLabel } from './config'
|
||
import ToolForm from './components/ToolForm.vue'
|
||
import { listAPI, delDataAPI } from '@/api/enterpriseLibrary/tool/tool'
|
||
import { encryptWithSM4, decryptWithSM4 } from '@/utils/sm'
|
||
import { downloadFileWithLoading } from '@/utils/download'
|
||
import ImportExcelDialog from '@/views/common/ImportExcelDialog'
|
||
const IMPORT_URL = '/smartBid/mainDatabase/tool/importData';
|
||
export default {
|
||
name: 'Tools',
|
||
components: {
|
||
TableModel,
|
||
ToolForm,
|
||
ImportExcelDialog
|
||
},
|
||
data() {
|
||
return {
|
||
formLabel,
|
||
columnsList,
|
||
listAPI,
|
||
enterpriseId: decryptWithSM4(this.$route.query.enterpriseId) || '0',
|
||
title: "",
|
||
isflag: false,
|
||
isAdd: '',
|
||
row: {},
|
||
maxFileTips:'20MB',
|
||
importExcelDialogVisible: false,
|
||
// 批量导入上传地址（需要根据实际API接口修改）
|
||
importExcelDialogUploadUrl: process.env.VUE_APP_BASE_API + IMPORT_URL,
|
||
params:{
|
||
enterpriseId: decryptWithSM4(this.$route.query.enterpriseId) || '0',
|
||
},
|
||
}
|
||
},
|
||
|
||
created() {
|
||
},
|
||
computed:{
|
||
sendParams(){
|
||
return {
|
||
enterpriseId : this.enterpriseId
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
// 返回上一页
|
||
handleBack() {
|
||
const obj = {
|
||
path: "/enterpriseKnowledge/index",
|
||
query: {
|
||
enterpriseId: encryptWithSM4(this.enterpriseId || '0'),
|
||
}
|
||
}
|
||
this.$tab.closeOpenPage(obj)
|
||
},
|
||
/** 新增按钮操作 */
|
||
handleAdd() {
|
||
this.title = "新增工器具";
|
||
this.isAdd = 'add';
|
||
this.row = {enterpriseId:this.enterpriseId};
|
||
this.isflag = true;
|
||
},
|
||
|
||
/** 修改操作 */
|
||
handleUpdate(row) {
|
||
this.title = "修改工器具";
|
||
this.isAdd = 'edit';
|
||
this.row = row;
|
||
this.isflag = true;
|
||
},
|
||
|
||
/* 查看操作 */
|
||
handleDetail(row){
|
||
this.title = "查看详情";
|
||
this.isAdd = 'detail';
|
||
this.row = row;
|
||
this.isflag = true;
|
||
},
|
||
// 模板下载
|
||
handleModelExport() {
|
||
downloadFileWithLoading(
|
||
'smartBid/commonDownload/downLoadToolModel',
|
||
'工器具导入模板.xlsx',
|
||
'正在下载模板，请稍候...'
|
||
)
|
||
},
|
||
// 批量导入
|
||
handleBathchImport(){
|
||
this.importExcelDialogVisible = true;
|
||
},
|
||
handleImportSuccess() {
|
||
this.handleQuery();
|
||
},
|
||
handleImportClose() {
|
||
this.handleQuery();
|
||
},
|
||
closeDialog() {
|
||
this.isflag = false;
|
||
},
|
||
/* 搜索操作 */
|
||
handleQuery() {
|
||
this.$refs.toolTableRef.getTableList()
|
||
},
|
||
/** 删除操作 */
|
||
handleDelete(row) {
|
||
this.$confirm(`确定要删除"${row.toolName}"吗？删除后将无法恢复！`, '操作提示', {
|
||
confirmButtonText: '确定',
|
||
cancelButtonText: '取消',
|
||
type: 'warning',
|
||
dangerouslyUseHTMLString: true,
|
||
customClass: 'delete-confirm-dialog'
|
||
}).then(() => {
|
||
delDataAPI(
|
||
{
|
||
toolId: row.toolId,
|
||
enterpriseId: this.enterpriseId
|
||
}
|
||
).then(res => {
|
||
if (res.code === 200) {
|
||
this.$message.success('删除成功');
|
||
this.handleQuery();
|
||
} else {
|
||
this.$message.error(res.msg || '删除失败');
|
||
}
|
||
}).catch(error => {
|
||
console.error('删除失败:', error);
|
||
});
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
.tool-container {
|
||
height: calc(100vh - 84px);
|
||
overflow: hidden;
|
||
background: linear-gradient(180deg, #F1F6FF 20%, #E5EFFF 100%);
|
||
}
|
||
|
||
.back-container {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
margin-bottom: 20px;
|
||
padding: 0 20px;
|
||
|
||
.back-btn {
|
||
width: 98px;
|
||
height: 36px;
|
||
background: #FFFFFF;
|
||
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
|
||
border-radius: 4px;
|
||
border: none;
|
||
color: #666;
|
||
font-size: 14px;
|
||
transition: all 0.3s ease;
|
||
|
||
&:hover {
|
||
background: #f5f5f5;
|
||
color: #409EFF;
|
||
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.add-btn {
|
||
width: 121px;
|
||
height: 36px;
|
||
background: #1F72EA;
|
||
box-shadow: 0px 4px 8px 0px rgba(51, 135, 255, 0.5);
|
||
border-radius: 4px 4px 4px 4px;
|
||
color: #fff;
|
||
border: none;
|
||
font-size: 14px;
|
||
transition: all 0.3s;
|
||
|
||
&:hover {
|
||
background: #4A8BFF;
|
||
box-shadow: 0px 6px 12px 0px rgba(51, 135, 255, 0.6);
|
||
}
|
||
}
|
||
|
||
.action-btn {
|
||
margin-right: 8px;
|
||
|
||
&:last-child {
|
||
margin-right: 0;
|
||
}
|
||
}
|
||
</style>
|