阀值信息界面实现

This commit is contained in:
Li xia 2024-09-03 15:30:01 +08:00
parent ab5472bda3
commit c1763cc2f5
4 changed files with 662 additions and 20 deletions

View File

@ -64,6 +64,62 @@ export function updateMaterial(id, data) {
export function deleteMaterial(id) {
return request({
url: `/cms/material/${id}/`,
method: 'delete',
method: 'delete'
})
}
}
export function getSourceList(query) {
return request({
url: '/cms/source/',
method: 'get',
params:query
})
}
export function createSource(data) {
return request({
url: '/cms/source/',
method: 'post',
data
})
}
export function updateSource(id, data) {
return request({
url: `/cms/source/${id}/`,
method: 'put',
data
})
}
export function deleteSource(id) {
return request({
url: `/cms/source/${id}/`,
method: 'delete'
})
}
export function getThresholdList(query) {
return request({
url: '/cms/threshold/',
method: 'get',
params:query
})
}
export function createThreshold(data) {
return request({
url: '/cms/threshold/',
method: 'post',
data
})
}
export function updateThreshold(id, data) {
return request({
url: `/cms/threshold/${id}/`,
method: 'put',
data
})
}
export function deleteThreshold(id) {
return request({
url: `/cms/threshold/${id}/`,
method: 'delete'
})
}

View File

@ -42,8 +42,6 @@ export const constantRoutes = [
component: () => import('@/views/404'),
hidden: true
}
]
/**
@ -94,7 +92,7 @@ export const asyncRoutes = [
component: () => import('@/views/news/newsupdate.vue'),
meta: { title: '编辑文章', noCache: true, icon: '', perms: ['news_update']},
hidden: true
},
}
]
},
{
@ -109,7 +107,7 @@ export const asyncRoutes = [
name: 'VodIndex',
component: () => import('@/views/vod/index.vue'),
meta: { title: '课程视频', icon: '', perms: ['vod'] }
},
}
]
},
{
@ -148,7 +146,7 @@ export const asyncRoutes = [
name: 'ConsumerRule',
component: () => import('@/views/crm/consumerrole.vue'),
meta: { title: '客户角色', icon: '', perms: ['consumerrole_view'] }
},
}
]
},
@ -223,43 +221,43 @@ export const asyncRoutes = [
name: 'CreateRule',
component: () => import('@/views/examtest/rulecreate.vue'),
meta: { title: '新建试卷结构', noCache: true, icon: '', perms: ['testrule_add']},
hidden: true
hidden: true
},
{
path: 'testrule/update',
name: 'UpdateRule',
component: () => import('@/views/examtest/ruleupdate.vue'),
meta: { title: '编辑试卷结构', noCache: true, icon: '', perms: ['testrule_update']},
hidden: true
hidden: true
},
{
path: 'workscope/create',
name: 'CreateWorkscope',
component: () => import('@/views/examtest/workscopecreate.vue'),
meta: { title: '新建工作类别', noCache: true, icon: '', perms: ['workscope_add']},
hidden: true
hidden: true
},
{
path: 'workscope/update',
name: 'UpdateWorkscope',
component: () => import('@/views/examtest/workscopeupdate.vue'),
meta: { title: '编辑工作类别', noCache: true, icon: '', perms: ['workscope_update']},
hidden: true
hidden: true
},
{
path: 'paper/create',
name: 'CreatePaper',
component: () => import('@/views/examtest/papercreate.vue'),
meta: { title: '新建押题试卷', noCache: true, icon: '', perms: ['paper_add']},
hidden: true
hidden: true
},
{
path: 'paper/update',
name: 'UpdatePaper',
component: () => import('@/views/examtest/paperupdate.vue'),
meta: { title: '编辑押题试卷', noCache: true, icon: '', perms: ['paper_update']},
hidden: true
},
hidden: true
}
]
},
{
@ -280,7 +278,22 @@ export const asyncRoutes = [
name: 'issue',
component: () => import('@/views/exam/issue.vue'),
meta: { title: '出证记录', perms: ['certificate_view'] }
},
}
]
},
{
path: '/threshold',
component: Layout,
redirect: '/threshold/source',
name: 'Threshold',
meta: { title: '阀值管理', icon: 'component'},
children: [
{
path: 'source',
name: 'source',
component: () => import('@/views/threshold/source.vue'),
meta: { title: '阀值管理', perms: ['threshold_view'] }
}
]
},
{
@ -307,10 +320,10 @@ export const asyncRoutes = [
name: 'chart',
component: () => import('@/views/analyse/chart.vue'),
meta: { title: '图表分析', icon: '', perms: ['chart_manage'] }
},
}
]
},
// {
// path: '/qtest',
// component: Layout,

View File

@ -161,8 +161,8 @@ export default {
});
this.getList()
});
}).catch(() => {
}).catch(() => {
});
},
handleTop(scope) {
@ -175,7 +175,7 @@ export default {
this.getList()
}
});
}
}

View File

@ -0,0 +1,573 @@
<template>
<div class="app-container">
<el-row :gutter="2">
<el-col :span="6">
<el-card>
<div slot="header">
<span>阀值来源信息</span>
<el-button
type="primary"
size="small"
style="margin-left: 8px"
@click="handleAdd"
>新增</el-button>
</div>
<el-table
v-loading="listLoading"
:data="sourceData.results"
style="width: 100%;margin-top:10px;"
border
stripe
fit
highlight-current-row
max-height="600"
@row-click="sourceRowClick"
>
<el-table-column type="index" width="50" />
<el-table-column align="center" label="来源名称" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.name }}</template>
</el-table-column>
<el-table-column align="center" label="作者" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.author }}</template>
</el-table-column>
<el-table-column align="center" label="发表年份">
<template slot-scope="scope">{{ scope.row.publish_year }}</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button
type="primary"
size="small"
icon="el-icon-edit"
:disabled="!checkPermission(['source_update'])"
@click="handleEdit(scope)"
/>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
:disabled="!checkPermission(['source_delete'])"
@click="handleDelete(scope)"
/>
</template>
</el-table-column>
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getList"
/>
<el-dialog :visible.sync="dialogVisible" :title="dialogType==='edit'?'编辑阀值来源信息':'新增阀值来源信息'">
<el-form
ref="commonForm"
:model="source"
label-width="80px"
label-position="right"
:rules="rule1"
>
<el-form-item label="来源名称" prop="name">
<el-input v-model="source.name" placeholder="名称" />
</el-form-item>
<el-form-item label="作者" prop="author">
<el-input v-model="source.author" placeholder="作者" />
</el-form-item>
<el-form-item label="发表年份" prop="publish_year">
<el-input v-model.number="source.publish_year" placeholder="发表年份" />
</el-form-item>
<el-form-item label="备注" prop="note">
<el-input v-model="source.note" placeholder="备注" />
</el-form-item>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisible=false">取消</el-button>
<el-button type="primary" @click="confirm('commonForm')">确认</el-button>
</div>
</el-dialog>
</el-card>
</el-col>
<el-col :span="18">
<el-card>
<div slot="header">
<span>阀值信息</span>
<el-button
type="primary"
size="small"
style="margin-left: 8px"
@click="AddThreshold"
>新增</el-button>
</div>
<el-table
v-loading="listLoading"
:data="thresholdData.results"
style="width: 100%;margin-top:10px;"
border
stripe
fit
highlight-current-row
max-height="600"
>
<el-table-column type="index" :index="hindex" width="50" />
<el-table-column align="center" label="阀值来源" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.source_.name }}</template>
</el-table-column>
<el-table-column align="center" label="化合物分类" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.compound_cate }}</template>
</el-table-column>
<el-table-column align="center" label="气味类型" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.odor_type }}</template>
</el-table-column>
<el-table-column align="center" label="阈值类型" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.threshold_type }}</template>
</el-table-column>
<el-table-column align="center" label="毒性类型" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.toxicity_type }}</template>
</el-table-column>
<el-table-column align="center" label="中文名" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.chinese_name }}</template>
</el-table-column>
<el-table-column align="center" label="ppm" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.ppm }}</template>
</el-table-column>
<el-table-column align="center" label="ppm符号标记" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.ppm_sign }}</template>
</el-table-column>
<el-table-column align="center" label="质量浓度" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.mass }}</template>
</el-table-column>
<el-table-column align="center" label="毒性" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.toxicity }}</template>
</el-table-column>
<el-table-column align="center" label="质量浓度符号标记" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.mass_sign }}</template>
</el-table-column>
<el-table-column align="center" label="分子质量" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.molecular }}</template>
</el-table-column>
<el-table-column align="center" label="cas号" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.cas }}</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template slot-scope="scope">
<el-button
type="primary"
size="small"
icon="el-icon-edit"
:disabled="!checkPermission(['threshold_update'])"
@click="ThresholdEdit(scope)"
/>
<el-button
type="danger"
size="small"
icon="el-icon-delete"
:disabled="!checkPermission(['threshold_delete'])"
@click="DeleteThreshold(scope)"
/>
</template>
</el-table-column>
</el-table>
<pagination
v-show="thresholdData.count>0"
:total="thresholdData.count"
:page.sync="listQuery.page"
:limit.sync="listQuery.limit"
@pagination="getThresholdList"
/>
<el-dialog :visible.sync="dialogVisibleT" :title="dialogType2==='edit'?'编辑阀值信息':'新增阀值信息'">
<el-form
ref="commonForm2"
:model="threshold"
label-width="140px"
label-position="right"
:rules="rule2"
>
<el-row>
<el-col :span="12">
<el-form-item label="阀值来源" prop="source">
<el-select v-model="threshold.source" placeholder="请选择阀值来源">
<el-option
v-for="item in optionsSource"
:key="item.id"
:label="item.name"
:value="item.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="化合物分类" prop="compound_cate">
<el-input v-model="threshold.compound_cate" placeholder="化合物分类" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="气味类型" prop="odor_type">
<el-input v-model="threshold.odor_type" placeholder="气味类型" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="阀值类型" prop="threshold_type">
<el-input v-model="threshold.threshold_type" placeholder="阀值类型" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="毒性类型" prop="toxicity_type">
<el-input v-model="threshold.toxicity_type" placeholder="毒性类型" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="中文名" prop="chinese_name">
<el-input v-model="threshold.chinese_name" placeholder="中文名" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="ppm"
prop="ppm"
:rules="[
{ required: true, message: 'ppm不能为空'},
{ type: 'number', message: 'ppm必须为数字值'}
]"
>
<el-input v-model.number="threshold.ppm" placeholder="ppm" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item label="ppm符号标记" prop="ppm_sign">
<el-input v-model="threshold.ppm_sign" placeholder="ppm符号标记" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item
label="质量浓度"
prop="mass"
:rules="[
{ required: true, message: '质量浓度不能为空'},
{ type: 'number', message: '质量浓度必须为数字值'}
]"
>
<el-input v-model.number="threshold.mass" placeholder="质量浓度" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="毒性"
prop="toxicity"
:rules="[
{ required: true, message: '毒性不能为空'},
{ type: 'number', message: '毒性必须为数字值'}
]"
>
<el-input v-model.number="threshold.toxicity" placeholder="毒性" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="12">
<el-form-item label="质量浓度符号标记" prop="mass_sign">
<el-input v-model="threshold.mass_sign" placeholder="质量浓度符号标记" />
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item
label="分子质量"
prop="molecular"
:rules="[
{ required: true, message: '分子质量不能为空'},
{ type: 'number', message: '分子质量必须为数字值'}
]"
>
<el-input v-model.number="threshold.molecular" placeholder="分子质量" />
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="cas号" prop="cas">
<el-input v-model="threshold.cas" placeholder="cas号" />
</el-form-item>
</el-col>
</el-row>
</el-form>
<div style="text-align:right;">
<el-button type="danger" @click="dialogVisibleT=false">取消</el-button>
<el-button type="primary" @click="confirmThreshold('commonForm2')">确认</el-button>
</div>
</el-dialog>
</el-card>
</el-col>
</el-row></div>
</template>
<script>
import { getSourceList, createSource, deleteSource, updateSource, getThresholdList,
createThreshold, deleteThreshold, updateThreshold } from '@/api/cms'
import checkPermission from '@/utils/permission'
import { genTree, deepClone } from '@/utils'
import Pagination from '@/components/Pagination'
const listQuery = {
page: 1,
limit: 20,
search: ''
}
//
const defaultObj = {
id: '',
name: '',
author: '',
publish_year: null,
note: ''
}
//
const defaultObjT = {
source: null,
compound_cate: '',
odor_type: '',
threshold_type: '',
toxicity_type: '',
chinese_name: '',
ppm: null,
ppm_sign: '',
mass: null,
toxicity: '',
mass_sign: '',
molecular: '',
cas: ''
}
export default {
components: { Pagination },
data() {
var check_publish_year = (rule, value, callback) => {
if (!value) {
return callback(new Error('发表年份不能为空'))
}
setTimeout(() => {
if (!Number.isInteger(value)) {
callback(new Error('请输入数字值'))
} else {
if (value < 0 && value > 32767) {
callback(new Error('必须0到32767之前的数值'))
} else {
callback()
}
}
}, 1000)
}
return {
listQuery: Object.assign({}, listQuery),
source: defaultObj,
threshold: defaultObjT,
search: '',
sourceData: [],
thresholdData: [],
optionsSource: [],
listLoading: true,
dialogVisible: false,
dialogVisibleT: false,
dialogType: 'new',
dialogType2: 'new',
rule1: {
name: [{ required: true, message: '请输入来源名称', trigger: 'blur' }],
publish_year: [
{ validator: check_publish_year, trigger: 'blur' }
]
},
rule2: {
source: [{ required: true, message: '请选择来源名称', trigger: 'change' }],
compound_cate: [{ required: true, message: '请输入化合物分类', trigger: 'blur' }],
chinese_name: [{ required: true, message: '请输入中文名', trigger: 'blur' }],
ppm_sign: [{ required: true, message: '请输入ppm符号标记', trigger: 'blur' }],
mass_sign: [{ required: true, message: '请输入质量浓度符号标记', trigger: 'blur' }],
cas: [{ required: true, message: '请输入cas号', trigger: 'blur' }]
}
}
},
created() {
this.getList()
this.getThresholdList()
this.getSourceAll()
},
methods: {
checkPermission,
//
hindex(index) {
return (this.listQuery.page - 1) * this.listQuery.limit + index + 1
},
//
getList() {
this.listLoading = true
getSourceList().then(response => {
this.sourceData = response.data
this.listLoading = false
})
},
//
sourceRowClick(row) {
this.listQuery.source = row.id
this.threshold.source = row.id
this.getThresholdList()
},
resetFilter() {
this.listQuery = {
page: 1,
limit: 20,
search: ''
}
this.getList()
},
//
handleAdd() {
this.source = Object.assign({}, defaultObj)
this.dialogType = 'new'
this.dialogVisible = true
this.$nextTick(() => {
this.$refs['commonForm'].clearValidate()
})
},
//
handleEdit(scope) {
this.source = Object.assign({}, scope.row) // copy obj
this.dialogType = 'edit'
this.dialogVisible = true
this.$nextTick(() => {
this.$refs['commonForm'].clearValidate()
})
},
//
handleDelete(scope) {
this.$confirm('确认删除该阀值来源数据吗?将丢失数据!', '警告', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'error'
})
.then(async() => {
await deleteSource(scope.row.id)
this.getList()
this.$message({
type: 'success',
message: '成功删除!'
})
})
// eslint-disable-next-line handle-callback-err
.catch(err => {
// console.error(err);
})
},
// from
async confirm(form) {
this.$refs[form].validate(valid => {
if (valid) {
const isEdit = this.dialogType === 'edit'
if (isEdit) {
updateSource(this.source.id, this.source).then(
() => {
this.getList()
this.dialogVisible = false
this.$message.success('成功')
}
)
} else {
createSource(this.source).then(res => {
this.getList()
this.dialogVisible = false
this.$message.success('成功')
})
}
} else {
return false
}
})
},
//
getSourceAll() {
getSourceList().then((response) => {
this.optionsSource = genTree(response.data.results)
})
},
//
getThresholdList() {
this.listLoading = true
getThresholdList(this.listQuery).then(response => {
this.thresholdData = response.data
this.listLoading = false
})
},
//
AddThreshold() {
this.threshold = Object.assign({}, defaultObjT)
this.dialogType2 = 'new'
this.dialogVisibleT = true
this.$nextTick(() => {
this.$refs['commonForm2'].clearValidate()
})
},
//
ThresholdEdit(scope) {
this.threshold = Object.assign({}, scope.row) // copy obj
this.dialogType2 = 'edit'
this.dialogVisibleT = true
this.$nextTick(() => {
this.$refs['commonForm2'].clearValidate()
})
},
//
DeleteThreshold(scope) {
this.$confirm('确认删除该阀值数据吗?将丢失数据!', '警告', {
confirmButtonText: '确认',
cancelButtonText: '取消',
type: 'error'
})
.then(async() => {
await deleteThreshold(scope.row.id)
this.getThresholdList()
this.$message({
type: 'success',
message: '成功删除!'
})
})
// eslint-disable-next-line handle-callback-err
.catch(err => {
// console.error(err);
})
},
// from
async confirmThreshold(form) {
this.$refs[form].validate(valid => {
if (valid) {
const isEdit = this.dialogType2 === 'edit'
if (isEdit) {
updateThreshold(this.threshold.id, this.threshold).then(
() => {
this.getThresholdList()
this.dialogVisibleT = false
this.$message.success('成功')
}
)
} else {
createThreshold(this.threshold).then(res => {
this.getThresholdList()
this.dialogVisibleT = false
this.$message.success('成功')
})
}
} else {
return false
}
})
}
}
}
</script>