样本库
This commit is contained in:
parent
05d17a539e
commit
7ecc73131e
|
|
@ -0,0 +1,46 @@
|
||||||
|
import request from '@/utils/request'
|
||||||
|
|
||||||
|
// 数据管理->样本库管理->查询样本库列表
|
||||||
|
export function sampleListAPI(params) {
|
||||||
|
return request({
|
||||||
|
url: '/smartPlatform/data/sample/getSampleList',
|
||||||
|
method: 'GET',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据管理->样本库管理->新增样本库
|
||||||
|
export function addSampleDataAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/smartPlatform/data/sample/addSampleData',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据管理->样本库管理->修改样本库
|
||||||
|
export function editSampleDataAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/smartPlatform/data/sample/editSampleData',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据管理->样本库管理->删除样本库
|
||||||
|
export function delSampleDataAPI(data) {
|
||||||
|
return request({
|
||||||
|
url: '/smartPlatform/data/sample/delSampleData',
|
||||||
|
method: 'post',
|
||||||
|
data
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
// 数据管理->样本库管理->样本库详情
|
||||||
|
export function getSampleDetailAPI(params) {
|
||||||
|
return request({
|
||||||
|
url: '/smartPlatform/data/sample/getSampleDetail',
|
||||||
|
method: 'get',
|
||||||
|
params
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,244 @@
|
||||||
|
<template>
|
||||||
|
<!-- 小型弹窗，用于完成，删除，保存等操作 -->
|
||||||
|
<el-dialog class="l-dialog" :class="lDialog" :title="title" :visible.sync="dialogVisible" :showClose="true"
|
||||||
|
:closeOnClickModal="false" @close="handleClose" :append-to-body="true">
|
||||||
|
<div>
|
||||||
|
<el-form :model="form" :rules="rules" ref="ruleForm" label-width="110px" label-position="top">
|
||||||
|
<el-form-item label="样本库名称" prop="sampleLibraryName">
|
||||||
|
<el-input class="form-item" v-model="form.sampleLibraryName" clearable show-word-limit
|
||||||
|
placeholder="请输入样本库名称" maxlength="32"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="样本库标签" prop="sampleLibraryLabel">
|
||||||
|
<el-select class="form-item" v-model="form.sampleLibraryLabel" clearable show-word-limit multiple
|
||||||
|
placeholder="请选择样本库标签">
|
||||||
|
<el-option v-for="item in dict.type.sample_label" :key="item.value" :label="item.label"
|
||||||
|
:value="item.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="数据类型" prop="sampleLibraryType">
|
||||||
|
<el-select class="form-item" v-model="form.sampleLibraryType" clearable show-word-limit
|
||||||
|
placeholder="请选择数据类型">
|
||||||
|
<el-option v-for="item in dict.type.sample_data_type" :key="item.value" :label="item.label"
|
||||||
|
:value="item.value"></el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="描述" prop="sampleLibraryDesc">
|
||||||
|
<el-input type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" class="form-item"
|
||||||
|
v-model.trim="form.sampleLibraryDesc" clearable show-word-limit placeholder="请输入描述"
|
||||||
|
maxlength="200"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button type="primary" class="confirm-btn" :disabled="disabled"
|
||||||
|
@click="submitForm('ruleForm')">确认</el-button>
|
||||||
|
<el-button class="cancel-btn" @click="handleClose" :disabled="disabled">取消</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import _ from 'lodash'
|
||||||
|
import { addSampleDataAPI, editSampleDataAPI, getSampleDetailAPI } from '@/api/data/sample'
|
||||||
|
const CONSTANT_PARAMS = {
|
||||||
|
type: 'edit'
|
||||||
|
};
|
||||||
|
export default {
|
||||||
|
name: "SampleForm",
|
||||||
|
props: ["width", "rowData", "title", "disabled", "isAdd"],
|
||||||
|
dicts: ['sample_label', 'sample_data_type'],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
lDialog: this.width > 500 ? "w700" : "w500",
|
||||||
|
dialogVisible: true,
|
||||||
|
form: {
|
||||||
|
sampleLibraryId: null,
|
||||||
|
sampleLibraryName: '',
|
||||||
|
sampleLibraryLabel: [],
|
||||||
|
sampleLibraryType: null,
|
||||||
|
sampleLibraryDesc: '',
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
sampleLibraryName: [
|
||||||
|
{ required: true, message: '样本库名称不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
sampleLibraryLabel: [
|
||||||
|
{ required: true, message: '样本库标签不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
sampleLibraryType: [
|
||||||
|
{ required: true, message: '数据类型不能为空', trigger: 'blur' }
|
||||||
|
],
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
isAdd: {
|
||||||
|
handler(newVal) {
|
||||||
|
if (newVal === CONSTANT_PARAMS.type) {
|
||||||
|
this.initFormData();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
isAddData() {
|
||||||
|
return this.isAdd === CONSTANT_PARAMS.type;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
/** 初始化表单数据 */
|
||||||
|
async initFormData() {
|
||||||
|
const { data } = await getSampleDetailAPI({ sampleLibraryId: this.rowData.sampleLibraryId });
|
||||||
|
if (data) {
|
||||||
|
this.form = {
|
||||||
|
...this.form,
|
||||||
|
...data,
|
||||||
|
sampleLibraryLabel: data.sampleLibraryLabel ? data.sampleLibraryLabel.split(',') : []
|
||||||
|
};
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/*关闭弹窗 */
|
||||||
|
handleClose() {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.$emit("closeDialog");
|
||||||
|
},
|
||||||
|
/**确认弹窗 */
|
||||||
|
sureBtnClick() {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.$emit("closeDialog");
|
||||||
|
},
|
||||||
|
/**重置表单*/
|
||||||
|
reset() {
|
||||||
|
this.form = {
|
||||||
|
sampleLibraryId: null,
|
||||||
|
sampleLibraryName: '',
|
||||||
|
sampleLibraryLabel: [],
|
||||||
|
sampleLibraryType: null,
|
||||||
|
sampleLibraryDesc: '',
|
||||||
|
};
|
||||||
|
this.resetForm("ruleForm");
|
||||||
|
},
|
||||||
|
handleReuslt(res) {
|
||||||
|
this.$modal.msgSuccess(res.msg);
|
||||||
|
this.reset();
|
||||||
|
this.$emit('handleQuery');
|
||||||
|
this.handleClose();
|
||||||
|
},
|
||||||
|
/**验证 */
|
||||||
|
submitForm(formName) {
|
||||||
|
this.$refs[formName].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
// 显示遮罩层
|
||||||
|
this.loading = this.$loading({
|
||||||
|
lock: true,
|
||||||
|
text: "数据提交中，请稍候...",
|
||||||
|
background: 'rgba(0,0,0,0.5)',
|
||||||
|
target: this.$el.querySelector('.el-dialog') || document.body
|
||||||
|
})
|
||||||
|
let params = _.cloneDeep(this.form);
|
||||||
|
params.sampleLibraryLabel = params.sampleLibraryLabel.join(',');
|
||||||
|
if (!this.isAddData) { // 新增
|
||||||
|
addSampleDataAPI(params).then(res => {
|
||||||
|
this.loading.close();
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.handleReuslt(res);
|
||||||
|
} else {
|
||||||
|
this.$modal.msgError(res.msg);
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
this.loading.close();
|
||||||
|
this.$modal.msgError(this.errorMsg(error));
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
|
||||||
|
editSampleDataAPI(params).then(res => {
|
||||||
|
this.loading.close();
|
||||||
|
if (res.code === 200) {
|
||||||
|
this.handleReuslt(res);
|
||||||
|
} else {
|
||||||
|
this.$modal.msgError(res.msg);
|
||||||
|
}
|
||||||
|
}).catch(error => {
|
||||||
|
this.loading.close();
|
||||||
|
this.$modal.msgError(this.errorMsg(error));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.w700 ::v-deep .el-dialog {
|
||||||
|
width: 700px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500 ::v-deep .el-dialog {
|
||||||
|
width: 500px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500 ::v-deep .el-dialog__header,
|
||||||
|
.w700 ::v-deep .el-dialog__header {
|
||||||
|
.el-dialog__title {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.yxq .el-range-separator {
|
||||||
|
margin-right: 7px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-date-editor--daterange.el-input__inner {
|
||||||
|
width: 260px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.form-item {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.select-style {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.confirm-btn {
|
||||||
|
width: 98px;
|
||||||
|
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);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.cancel-btn {
|
||||||
|
width: 98px;
|
||||||
|
height: 36px;
|
||||||
|
background: #E5E5E5;
|
||||||
|
box-shadow: 0px 4px 8px 0px rgba(76, 76, 76, 0.2);
|
||||||
|
border-radius: 4px 4px 4px 4px;
|
||||||
|
color: #333;
|
||||||
|
border: none;
|
||||||
|
font-size: 14px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #d0d0d0;
|
||||||
|
box-shadow: 0px 6px 12px 0px rgba(76, 76, 76, 0.3);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .el-dialog__footer {
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
export const formLabel = [
|
||||||
|
{
|
||||||
|
isShow: false, // 是否展示label
|
||||||
|
f_type: 'ipt',
|
||||||
|
f_label: '样本库名称',
|
||||||
|
f_model: 'proName',
|
||||||
|
f_max: 32,
|
||||||
|
f_width: '250px',
|
||||||
|
},
|
||||||
|
]
|
||||||
|
|
||||||
|
export const columnsList = [
|
||||||
|
{ t_props: 'sampleLibraryName', t_label: '样本库名称' },
|
||||||
|
{ t_props: 'sampleLibraryLabel', t_label: '样本标签' },
|
||||||
|
{ t_props: 'sampleLibraryType', t_label: '数据类型' },
|
||||||
|
{ t_slot: 'sampleLibraryNum', t_label: '数据量' },
|
||||||
|
{ t_props: 'sampleLibraryDesc', t_label: '描述' },
|
||||||
|
{ t_props: 'updateTime', t_label: '更新时间' },
|
||||||
|
]
|
||||||
|
|
@ -0,0 +1,154 @@
|
||||||
|
<template>
|
||||||
|
<!-- 样本库管理 -->
|
||||||
|
<el-card class="sample-container">
|
||||||
|
<div class="table-container">
|
||||||
|
<TableModel :formLabel="formLabel" :showOperation="true" :showRightTools="false" ref="sampleTableRef"
|
||||||
|
:columnsList="columnsList" :request-api="sampleListAPI" :handleColWidth="250">
|
||||||
|
<template slot="tableTitle">
|
||||||
|
<h3>数据列表</h3>
|
||||||
|
</template>
|
||||||
|
<template slot="tableActions">
|
||||||
|
<el-button @click="handleAdd" v-hasPermi="['data:sample:add']" class="add-btn"><i
|
||||||
|
class="el-icon-plus"></i> 新建样本库</el-button>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template slot="sampleLibraryNum" slot-scope="{ data }">
|
||||||
|
<span>{{ data.sampleLibraryNum }}</span>
|
||||||
|
</template>
|
||||||
|
<template slot="handle" slot-scope="{ data }">
|
||||||
|
<el-button type="text" v-hasPermi="['data:sample:import']" class="action-btn"
|
||||||
|
style="color: #1f72ea" @click="handleImport(data)">
|
||||||
|
导入
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" v-hasPermi="['data:sample:del']" class="action-btn"
|
||||||
|
style="color: #EAA819" @click="handleUpdate(data)">
|
||||||
|
修改
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" v-hasPermi="['data:sample:del']" class="action-btn"
|
||||||
|
style="color: #DB3E29" @click="handleDelete(data)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</TableModel>
|
||||||
|
</div>
|
||||||
|
<!-- 新建样本库 -->
|
||||||
|
<SampleForm v-if="showSampleForm" :title="title" :rowData="row" :isAdd="isAdd" @closeDialog="showSampleForm = false"
|
||||||
|
:width="600" @handleQuery="handleQuery" />
|
||||||
|
</el-card>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import TableModel from '@/components/TableModel2'
|
||||||
|
import { columnsList, formLabel } from './config'
|
||||||
|
import { sampleListAPI,delSampleDataAPI } from '@/api/data/sample'
|
||||||
|
import SampleForm from './components/SampleForm.vue'
|
||||||
|
export default {
|
||||||
|
name: 'Sample',
|
||||||
|
components: {
|
||||||
|
TableModel,
|
||||||
|
SampleForm,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
formLabel,
|
||||||
|
columnsList,
|
||||||
|
sampleListAPI,
|
||||||
|
showSampleForm: false,
|
||||||
|
title: '',
|
||||||
|
row: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() { },
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
|
||||||
|
/** 新增按钮操作 */
|
||||||
|
handleAdd() {
|
||||||
|
this.title = '新建样本库'
|
||||||
|
this.isAdd = 'add'
|
||||||
|
this.showSampleForm = true
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 修改操作 */
|
||||||
|
handleUpdate(row) {
|
||||||
|
this.title = '修改样本库'
|
||||||
|
this.isAdd = 'edit'
|
||||||
|
this.row = row
|
||||||
|
this.showSampleForm = true
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/* 搜索操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.$refs.sampleTableRef.getTableList()
|
||||||
|
},
|
||||||
|
|
||||||
|
/** 删除操作 */
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$confirm(
|
||||||
|
`确定要删除"${row.sampleLibraryName}"吗？删除后将无法恢复！`,
|
||||||
|
'操作提示',
|
||||||
|
{
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'warning',
|
||||||
|
dangerouslyUseHTMLString: true,
|
||||||
|
customClass: 'delete-confirm-dialog',
|
||||||
|
},
|
||||||
|
).then(() => {
|
||||||
|
delSampleDataAPI({
|
||||||
|
sampleLibraryId: row.sampleLibraryId,
|
||||||
|
})
|
||||||
|
.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">
|
||||||
|
.sample-container {
|
||||||
|
height: calc(100vh - 84px);
|
||||||
|
overflow: hidden;
|
||||||
|
background: linear-gradient(180deg, #f1f6ff 20%, #e5efff 100%);
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .table-card {
|
||||||
|
height: calc(100vh - 230px) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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>
|
||||||
Loading…
Reference in New Issue