parent
747726392c
commit
a56305d8a1
23 changed files with 3676 additions and 1241 deletions
|
After Width: | Height: | Size: 796 B |
|
After Width: | Height: | Size: 395 B |
@ -0,0 +1,386 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="left"> |
||||
<codemirror |
||||
v-model="codeVal" |
||||
:options="cmOption" |
||||
class="code-mirror" |
||||
@ready="ready" |
||||
ref="codemirror" |
||||
></codemirror> |
||||
<el-button |
||||
class="run btn" |
||||
type="primary" |
||||
@click="runCode" |
||||
>运行</el-button> |
||||
</div> |
||||
<div class="code-right answer"> |
||||
<p class="text-wrapper">{{ runResult }}</p> |
||||
<div class="pic-wrap" v-if="picSrcList.length"> |
||||
<div class="pic-item" v-for="(img, i) in picSrcList" :key="i"> |
||||
<el-image |
||||
class="pic" |
||||
:src="img" |
||||
:preview-src-list="picSrcList"> |
||||
</el-image> |
||||
<el-button class="download-btn btn" type="primary" size="mini" @click="downloadPic(i)">下载图片</el-button> |
||||
<a :ref="'picLink' + i" style="display: none;" download="运行结果.png" :href="img">下载图片</a> |
||||
</div> |
||||
</div> |
||||
<div class="result-right t-color" v-show="isError"> |
||||
<img src="@/assets/img/yes.png" alt />运行成功 |
||||
</div> |
||||
<div class="result-wrong" v-show="isError === 0"> |
||||
<img src="@/assets/img/error.png" alt /> |
||||
第{{errLine}}行出现错误 |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import { codemirror } from "vue-codemirror"; |
||||
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式 |
||||
import "codemirror/mode/javascript/javascript.js"; |
||||
import "codemirror/mode/python/python.js"; |
||||
import "codemirror/lib/codemirror.css"; |
||||
// require active-line.js |
||||
import "codemirror/addon/selection/active-line.js"; |
||||
// styleSelectedText |
||||
import "codemirror/addon/selection/mark-selection.js"; |
||||
// hint |
||||
import "codemirror/addon/hint/show-hint.js"; |
||||
import "codemirror/addon/hint/sql-hint.js"; |
||||
import "codemirror/addon/hint/show-hint.css"; |
||||
import "codemirror/addon/hint/javascript-hint.js"; |
||||
// highlightSelectionMatches |
||||
import "codemirror/addon/scroll/annotatescrollbar.js"; |
||||
import "codemirror/addon/search/matchesonscrollbar.js"; |
||||
import "codemirror/addon/search/match-highlighter.js"; |
||||
// keyMap |
||||
import "codemirror/mode/clike/clike.js"; |
||||
import "codemirror/mode/sql/sql.js"; |
||||
import "codemirror/addon/edit/matchbrackets.js"; |
||||
import "codemirror/addon/comment/comment.js"; |
||||
import "codemirror/addon/dialog/dialog.js"; |
||||
import "codemirror/addon/dialog/dialog.css"; |
||||
import "codemirror/addon/search/searchcursor.js"; |
||||
import "codemirror/addon/search/search.js"; |
||||
import "codemirror/keymap/sublime.js"; |
||||
// foldGutter |
||||
import "codemirror/addon/fold/foldgutter.css"; |
||||
import "codemirror/addon/fold/brace-fold.js"; |
||||
import "codemirror/addon/fold/comment-fold.js"; |
||||
import "codemirror/addon/fold/foldcode.js"; |
||||
import "codemirror/addon/fold/foldgutter.js"; |
||||
import "codemirror/addon/fold/indent-fold.js"; |
||||
import "codemirror/addon/fold/markdown-fold.js"; |
||||
import "codemirror/addon/fold/xml-fold.js"; |
||||
// 编辑的主题文件 |
||||
import "codemirror/theme/monokai.css"; |
||||
import "codemirror/theme/base16-light.css"; |
||||
import { Loading } from 'element-ui'; |
||||
export default { |
||||
props: ['code', 'codeId', 'projectId', 'retResult', 'readOnly'], |
||||
data() { |
||||
return { |
||||
codeVal: this.code, |
||||
runResult: '', // 运行结果 |
||||
isError: false, // 运行正确与否 |
||||
errLine: '', // 错误代码的位置 |
||||
picSrcList: [], |
||||
loadIns: null, // loading实例 |
||||
cmOption: { |
||||
readOnly: this.readOnly, |
||||
scrollbarStyle: "native", |
||||
tabSize: 2, // tab |
||||
styleActiveLine: true, // 高亮选中行 |
||||
lineNumbers: true, // 显示行号 |
||||
styleSelectedText: true, |
||||
line: true, |
||||
foldGutter: true, // 块槽 |
||||
gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"], |
||||
highlightSelectionMatches: { showToken: /\w/, annotateScrollbar: true }, // 可以启用该选项来突出显示当前选中的内容的所有实例 |
||||
mode: 'python', |
||||
lineWrapping: true, //代码折叠 |
||||
autoCloseTags: true,// 自动闭合标签 |
||||
autoCloseBrackets: true,// 自动闭合括号 |
||||
// hint.js options |
||||
hintOptions: { |
||||
// 当匹配只有一项的时候是否自动补全 |
||||
completeSingle: false |
||||
}, |
||||
// 快捷键 可提供三种模式 sublime、emacs、vim |
||||
keyMap: "sublime", |
||||
matchBrackets: true, |
||||
showCursorWhenSelecting: true, |
||||
theme: "monokai" // 主题 |
||||
} |
||||
}; |
||||
}, |
||||
components: { |
||||
codemirror |
||||
}, |
||||
watch: { |
||||
codeVal(val) { |
||||
this.$emit("update:code", val) |
||||
} |
||||
}, |
||||
mounted() { |
||||
|
||||
}, |
||||
methods: { |
||||
// 页面加载完后重置编辑框大小 |
||||
ready() { |
||||
const code = this.$refs.codemirror.codemirror |
||||
code.setSize("auto", "calc(100vh - 370px)"); |
||||
code.on('keypress', function() { |
||||
// 显示智能提示 |
||||
code.showHint() |
||||
}); |
||||
}, |
||||
// 运行代码 |
||||
runCode() { |
||||
let code = this.codeVal |
||||
if (!code) { |
||||
this.$message({ |
||||
message: "警告哦，内容为空不可运行", |
||||
type: "warning" |
||||
}) |
||||
} else { |
||||
this.loadIns = Loading.service({ |
||||
background: 'transparent' |
||||
}) |
||||
code = code.replace(/\.savefig\(([\u4e00-\u9fa5\w]*?['"])/mg, str => { |
||||
return str + Date.now() |
||||
}) |
||||
// 把代码传给后端，在后端运行Python代码 |
||||
this.$post(this.api.runPythonCode, { |
||||
code |
||||
}).then(res => { |
||||
const data = res.code |
||||
const photo = data.photoUrl |
||||
const result = data.runResult |
||||
this.$emit('cache') // 每次运行代码都要把代码传给后端做缓存 |
||||
this.loadIns.close() |
||||
this.picSrcList = [] |
||||
if (photo) this.picSrcList = photo.split(',') |
||||
let imgList = '' |
||||
let firtImg = '' |
||||
try { |
||||
imgList = eval(result) |
||||
} catch (error) {} |
||||
if (imgList && imgList.length) firtImg = imgList[0] |
||||
// 如果是下载图片的代码，则要显示图片和运行结果，不用显示对错，换成显示下载图片 |
||||
if (photo) { |
||||
this.isError = '' // 对错隐藏 |
||||
const text = result.replace(photo, '') // 结果里包含了图片路径，所以要把图片路径给去掉 |
||||
this.runResult = text |
||||
this.picSrcList = photo.split(',') |
||||
} else if (imgList instanceof Array && imgList.length && typeof firtImg === 'string' && (firtImg.includes('.jpg') || firtImg.includes('.png') || firtImg.includes('img'))) { |
||||
/** |
||||
* 这段是为要下载图片的项目案例写的，后端会返回图片名称的数组，前端负责循环这个数组，然后下载下来 |
||||
* 只有该系统有这段代码，因为其他7个系统没有下载图片的项目，后续如果加了，直接把这段代码复制过去即可 |
||||
*/ |
||||
imgList.map((n,i) => { |
||||
// util.downloadFile(`${i+1}.jpg`,n) |
||||
}) |
||||
this.isError = 0 |
||||
this.runResult = '下载完成' |
||||
} else { |
||||
this.isError = data.retResult |
||||
this.runResult = result |
||||
this.errLine = parseInt(result.substring(result.indexOf("line") + 4, result.length)) |
||||
} |
||||
}).catch(res => { |
||||
this.isError = false |
||||
this.runResult = '' |
||||
this.picSrcList = [] |
||||
this.loadIns.close() |
||||
res.status == 500 && this.$message.error('检测到代码里有非法代码，请检查是否有调用系统命令。') |
||||
}) |
||||
} |
||||
}, |
||||
// 下载图片 |
||||
downloadPic(i) { |
||||
this.$refs['picLink' + i][0].click() |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
::-webkit-scrollbar { |
||||
width: 8px; |
||||
height: 8px; |
||||
} |
||||
::-webkit-scrollbar-thumb { |
||||
width: 5px; |
||||
border-radius: 6px; |
||||
background: rgba(173,173,173,.7); |
||||
} |
||||
.wrap { |
||||
display: flex; |
||||
} |
||||
.left{ |
||||
position: relative; |
||||
width: calc(100% - 400px); |
||||
} |
||||
.text-wrapper { |
||||
white-space: pre-wrap; |
||||
} |
||||
/deep/.answer { |
||||
.el-tab-pane { |
||||
padding: 0 10px; |
||||
height: 340px; |
||||
overflow: hidden; |
||||
overflow-y: auto; |
||||
white-space: pre-wrap; |
||||
} |
||||
.el-dialog--center { |
||||
width: 500px; |
||||
height: 500px; |
||||
} |
||||
.el-dialog__title { |
||||
font-size: 22px; |
||||
font-weight: 500; |
||||
} |
||||
.el-tabs__nav-wrap::after { |
||||
background-color: #333; |
||||
} |
||||
.el-tabs__active-bar { |
||||
height: 0; |
||||
background-color: #fff; |
||||
} |
||||
.el-tabs__header { |
||||
background-color: #333; |
||||
} |
||||
.el-dialog--center .el-dialog__body { |
||||
padding: 0; |
||||
} |
||||
.el-tabs__item { |
||||
width: 80px; |
||||
color: #fff; |
||||
} |
||||
.el-tabs--top .el-tabs__item.is-top:nth-child(2) { |
||||
padding-left: 20px; |
||||
} |
||||
.el-tabs__item.is-active { |
||||
color: #fff !important; |
||||
background-color: #333 !important; |
||||
} |
||||
.tips-btn { |
||||
margin-top: 10px; |
||||
height: 40px; |
||||
width: 90px; |
||||
border: none; |
||||
position: absolute; |
||||
right: 0; |
||||
background: rgba(255, 49, 49, 1); |
||||
color: rgba(255, 255, 255, 1); |
||||
&:hover, |
||||
&:focus, |
||||
&:active { |
||||
background: rgba(255, 49, 49, 1); |
||||
color: rgba(255, 255, 255, 1); |
||||
} |
||||
} |
||||
} |
||||
/deep/.CodeMirror-wrap pre.CodeMirror-line, |
||||
.CodeMirror-wrap pre.CodeMirror-line-like { |
||||
height: 30px; |
||||
line-height: 30px; |
||||
} |
||||
.result-right { |
||||
background-color: rgba(43, 40, 22, 1); |
||||
} |
||||
.result-wrong { |
||||
background-color: rgba(43, 22, 22, 1); |
||||
color: #f00; |
||||
} |
||||
.result-wrong, |
||||
.result-right { |
||||
position: absolute; |
||||
left: 20px; |
||||
right: 20px; |
||||
display: flex; |
||||
align-items: center; |
||||
bottom: 10px; |
||||
padding: 5px 10px; |
||||
img { |
||||
width: 40px; |
||||
height: 40px; |
||||
margin-top: 5px; |
||||
margin-right: 10px; |
||||
} |
||||
} |
||||
.code-right { |
||||
width: 500px; |
||||
color: #fff; |
||||
background: #1b1b1b; |
||||
display: inline-block; |
||||
position: relative; |
||||
overflow-x: auto; |
||||
p { |
||||
font-size: 18px; |
||||
margin: 10px; |
||||
position: absolute; |
||||
width: calc(100% - 14px); |
||||
top: 0; |
||||
bottom: -8px; |
||||
overflow: auto; |
||||
} |
||||
} |
||||
.pic-wrap { |
||||
position: absolute; |
||||
left: 0; |
||||
right: 0; |
||||
bottom: 5px; |
||||
display: flex; |
||||
max-width: calc(100% - 50px); |
||||
margin: 0 auto; |
||||
text-align: center; |
||||
overflow: auto; |
||||
.pic-item { |
||||
margin: 0 5px 5px; |
||||
&:only-child { |
||||
.pic { |
||||
width: 80%; |
||||
} |
||||
} |
||||
} |
||||
.pic { |
||||
display: block; |
||||
width: 100px; |
||||
margin: 0 auto 10px; |
||||
} |
||||
} |
||||
.code-mask{ |
||||
z-index: 2; |
||||
position: absolute; |
||||
top: 0; |
||||
left: 0; |
||||
bottom: 0; |
||||
right: 0; |
||||
} |
||||
.run{ |
||||
z-index:99; |
||||
position:absolute; |
||||
right: 50px; |
||||
bottom:15px; |
||||
width:100px; |
||||
color:#fff; |
||||
} |
||||
.download-btn{ |
||||
color:#fff; |
||||
} |
||||
/deep/.answer-wrap{ |
||||
pre{ |
||||
width: 100%; |
||||
white-space: pre-wrap; |
||||
} |
||||
img{ |
||||
max-width: 100%; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,222 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<el-card shadow="hover" |
||||
class="m-b-20"> |
||||
<div class="flex-between"> |
||||
<el-page-header @back="back" |
||||
:content="isDetail ? '查看源模型' : (id ? '编辑源模型' : '新增源模型')"></el-page-header> |
||||
<div v-if="!isDetail"> |
||||
<el-button type="primary" |
||||
round |
||||
v-preventReClick |
||||
@click="submit(1)">发布</el-button> |
||||
<el-button v-if="!postStatus" |
||||
type="primary" |
||||
round |
||||
v-preventReClick |
||||
@click="submit(0)">草稿</el-button> |
||||
</div> |
||||
</div> |
||||
</el-card> |
||||
|
||||
<el-card shadow="hover"> |
||||
<el-form label-width="80px" |
||||
:disabled="isDetail"> |
||||
<div class="item name"> |
||||
<label>模型名称</label> |
||||
<el-input placeholder="请输入模型名称" |
||||
v-model="form.modelName" |
||||
maxlength="25" |
||||
style="width: 400px"></el-input> |
||||
</div> |
||||
<div class="item name"> |
||||
<label>模型分类</label> |
||||
<el-cascader :options="categoryList" |
||||
v-model="categoryIdCus" |
||||
:props="categoryProps" |
||||
clearable> |
||||
</el-cascader> |
||||
</div> |
||||
<div class="item code"> |
||||
<label>模型代码</label> |
||||
<codemirror :key="codeKey" |
||||
:code.sync="form.modelDemo" |
||||
:readOnly="isDetail"></codemirror> |
||||
</div> |
||||
</el-form> |
||||
</el-card> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import codemirror from '@/components/codemirror' |
||||
export default { |
||||
components: { codemirror }, |
||||
data () { |
||||
return { |
||||
systemId: +this.$route.query.systemId, |
||||
categoryId: +this.$route.query.categoryId, |
||||
id: +this.$route.query.id, |
||||
postStatus: +this.$route.query.postStatus, |
||||
isDetail: Boolean(this.$route.query.show), // 是否是查看 |
||||
isModel: Boolean(this.$route.query.model), // 是否是从模型列表进来的，模型和源模型查询详情的接口不一样 |
||||
categoryIdCus: [], |
||||
form: { |
||||
modelName: '', |
||||
modelDemo: '' |
||||
}, |
||||
categoryList: [], |
||||
categoryProps: { |
||||
checkStrictly: true, |
||||
label: 'categoryName', |
||||
value: 'id' |
||||
}, |
||||
codeKey: 1, |
||||
submiting: false, |
||||
updateTime: 0 |
||||
}; |
||||
}, |
||||
watch: { |
||||
// 监听信息是否有更改,有的话页面离开的时候要询问是否要保存 |
||||
form: { |
||||
handler () { |
||||
this.updateTime++ |
||||
}, |
||||
deep: true |
||||
}, |
||||
}, |
||||
mounted () { |
||||
this.getType() |
||||
}, |
||||
methods: { |
||||
// 获取详情 |
||||
async getData () { |
||||
// 模型/源模型 |
||||
const res = await this.$post(`${this.api[this.isModel ? 'referenceFindById' : 'modelFindById']}?id=${this.id}`) |
||||
const { data } = res |
||||
const { modelName, categoryId, modelDemo } = data |
||||
this.form = { |
||||
modelName, |
||||
modelDemo |
||||
} |
||||
this.handleId(this.categoryList, categoryId) |
||||
this.codeKey++ |
||||
}, |
||||
// 处理id |
||||
handleId (list, id, parentId = []) { |
||||
list.map(e => { |
||||
// 取得父级id跟子级id的集合 |
||||
if (id === e.id) { |
||||
parentId.shift() // 全部的id要去掉 |
||||
this.categoryIdCus = [...parentId, e.id] |
||||
} else { |
||||
e.children && this.handleId(e.children, id, [...parentId, e.id]) |
||||
} |
||||
}) |
||||
}, |
||||
// 获取分类 |
||||
getType () { |
||||
this.$post(this.api.sourceModelClassification).then(res => { |
||||
const { data } = res |
||||
// 没有子级，删除children属性 |
||||
const handleLeaf = list => { |
||||
list.map(e => { |
||||
if (e.children.length) { |
||||
handleLeaf(e.children) |
||||
} else { |
||||
delete e.children |
||||
} |
||||
}) |
||||
} |
||||
handleLeaf(data) |
||||
this.categoryList = data[0].children |
||||
if (this.id) { |
||||
this.getData() |
||||
} else { |
||||
this.handleId(data, this.categoryId) |
||||
} |
||||
}).catch(res => { }) |
||||
}, |
||||
// 保存 |
||||
submit (postStatus, fromBack) { |
||||
if (this.submiting) return false |
||||
const { modelName, categoryId, modelDemo } = this.form |
||||
const categoryIdCus = this.categoryIdCus |
||||
const id = this.id |
||||
if (!modelName) return this.$message.error('请输入模型名称') |
||||
if (categoryIdCus[0] === 1) return this.$message.error('请选择模型分类') |
||||
if (postStatus) { |
||||
if (!modelDemo) return this.$message.error('请输入模型代码') |
||||
} |
||||
this.submiting = true |
||||
const data = { |
||||
categoryId: categoryIdCus[categoryIdCus.length - 1], |
||||
modelName, |
||||
modelDemo, |
||||
postStatus, |
||||
systemId: this.systemId |
||||
} |
||||
if (id) { |
||||
data.id = id |
||||
this.$post(this.api.updateSysModelDemo, data).then(res => { |
||||
this.$message.success('编辑成功') |
||||
fromBack || this.$router.back() |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
} else { |
||||
this.$post(this.api.saveAcademyModelDemo, data).then(res => { |
||||
this.$message.success('新增成功') |
||||
fromBack || this.$router.back() |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
} |
||||
}, |
||||
// 返回上一页 |
||||
backPage () { |
||||
this.$router.back() |
||||
}, |
||||
// 返回 |
||||
back () { |
||||
const id = this.id |
||||
const updateTime = this.updateTime |
||||
// 更改了信息才需要提示 |
||||
if ((id && updateTime > 1) || (!id && updateTime)) { |
||||
this.$confirm(`编辑的内容未保存，是否保存？`, '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.submit(this.postStatus ? 1 : 0, 1) |
||||
this.backPage() |
||||
}).catch(() => { |
||||
this.backPage() |
||||
}) |
||||
} else { |
||||
this.backPage() |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.item { |
||||
display: flex; |
||||
margin-bottom: 20px; |
||||
label { |
||||
padding: 0 15px 0 20px; |
||||
} |
||||
&.name { |
||||
align-items: center; |
||||
label { |
||||
text-align: right; |
||||
} |
||||
} |
||||
&.code { |
||||
flex-direction: column; |
||||
label { |
||||
margin-bottom: 15px; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,56 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="line"> |
||||
<span class="field">功能</span> |
||||
<span class="field">操作</span> |
||||
</div> |
||||
<div class="line"> |
||||
<span class="field">粘贴代码</span> |
||||
<div class="field"> |
||||
<el-switch v-model="isOpen" |
||||
:active-text="isOpen ? '关闭' : '启用'" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
style="margin: 0 10px 0 10px" |
||||
@change="switchOff(scope.row)"></el-switch> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</template> |
||||
<script> |
||||
export default { |
||||
data () { |
||||
return { |
||||
systemId: this.$route.query.systemId, |
||||
isOpen: 0 |
||||
}; |
||||
}, |
||||
mounted () { }, |
||||
methods: { |
||||
|
||||
switchOff (row) { |
||||
// this.$get(`${this.api.updateIsOpen}?isOpen=${row.ccupationlabOpen}&projectId=${row.projectId}&platformId=${this.queryData.platformId}`).then(res => { |
||||
// util.successMsg("更新启用状态成功"); |
||||
// this.getData(); |
||||
// }).catch(err => { |
||||
// console.log(err); |
||||
// }); |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
padding: 30px; |
||||
} |
||||
.line { |
||||
display: flex; |
||||
align-items: center; |
||||
margin-bottom: 20px; |
||||
text-align: center; |
||||
.field { |
||||
width: 100px; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,73 @@ |
||||
<template> |
||||
<div> |
||||
<el-card shadow="hover" |
||||
class="m-b-20"> |
||||
<el-page-header :content="'系统后台 / '+ $route.query.name" |
||||
@back="back"></el-page-header> |
||||
</el-card> |
||||
<div class="page" |
||||
style="padding: 0"> |
||||
<div class="tabs"> |
||||
<a class="item" |
||||
v-for="(item,index) in tabs" |
||||
:key="index" |
||||
:class="{active: index == active}" |
||||
@click="tabChange(index)">{{ item }}</a> |
||||
</div> |
||||
|
||||
<model v-if="active == 'model'"></model> |
||||
<sourceModel v-else-if="active == 'sourceModel'"></sourceModel> |
||||
<compiler v-else-if="active == 'compiler'"></compiler> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import model from "./model"; |
||||
import sourceModel from "./sourceModel"; |
||||
import compiler from "./compiler"; |
||||
export default { |
||||
data () { |
||||
return { |
||||
active: this.$route.query.type || 'model', |
||||
tabs: { |
||||
model: "模型列表管理", |
||||
sourceModel: "源模型管理", |
||||
compiler: '编译器管理' |
||||
} |
||||
}; |
||||
}, |
||||
computed: { |
||||
|
||||
}, |
||||
components: { |
||||
model, |
||||
sourceModel, |
||||
compiler |
||||
}, |
||||
created () { }, |
||||
methods: { |
||||
tabChange (index) { |
||||
this.active = index |
||||
this.$router.push({ |
||||
path: 'backstage', |
||||
query: { |
||||
...this.$route.query, |
||||
page: 1, |
||||
type: index, |
||||
categoryId: '' |
||||
} |
||||
}) |
||||
}, |
||||
back () { |
||||
this.$router.push('list') |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.page { |
||||
min-height: calc(100vh - 250px); |
||||
} |
||||
</style> |
||||
@ -0,0 +1,308 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="side"> |
||||
<org ref="tree" @initData="initData" @getData="getData"></org> |
||||
</div> |
||||
|
||||
<div class="right"> |
||||
<h6 class="p-title">筛选</h6> |
||||
<div class="tool"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<el-input placeholder="请输入模型名称" prefix-icon="el-icon-search" v-model.trim="keyword" clearable></el-input> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<el-button type="primary" round @click="add">导入模型</el-button> |
||||
<el-button type="primary" round @click="batchDel">批量移除</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table :data="listData" class="table" ref="table" stripe header-align="center" @selection-change="handleSelectionChange"> |
||||
<el-table-column type="selection" width="55" align="center"></el-table-column> |
||||
<el-table-column type="index" label="序号" width="55" align="center"></el-table-column> |
||||
<el-table-column prop="modelName" label="模型名称" align="center"></el-table-column> |
||||
<el-table-column v-if="isTopLevel" prop="categoryName" label="分类" width="150" align="center"></el-table-column> |
||||
<el-table-column prop="createTime" label="导入时间" align="center"></el-table-column> |
||||
<el-table-column label="状态" align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.isOpen ? '禁用' : '启用' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" width="200" align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" @click="show(scope.row)">查看</el-button> |
||||
<el-button type="text" @click="del(scope.row)">移除</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background layout="total, prev, pager, next" :current-page="page" @current-change="handleCurrentChange" :total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-dialog title="请选择需要导入的模型" :visible.sync="modelVisible" width="500px" class="dialog" :close-on-click-modal="false"> |
||||
<div class="model-wrap"> |
||||
<el-tree |
||||
v-if="modelData.length" |
||||
:data="modelData" v-loading="modelLoading" |
||||
ref="model" |
||||
default-expand-all |
||||
show-checkbox |
||||
node-key="id" |
||||
:props="{children: 'children', label: 'categoryName', isLeaf: 'leaf'}"> |
||||
</el-tree> |
||||
<div class="none" v-else>暂无可导入的模型</div> |
||||
</div> |
||||
<span slot="footer" class="dialog-footer"> |
||||
<el-button @click="modelVisible = false">取 消</el-button> |
||||
<el-button type="primary" @click="submit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import org from "./modelType" |
||||
export default { |
||||
data() { |
||||
return { |
||||
systemId: this.$route.query.systemId, |
||||
isTopLevel: true, // 是否是在顶级分类 |
||||
listData: [], |
||||
keyword: '', |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
multipleSelection: [], |
||||
modelVisible: false, |
||||
modelLoading: false, |
||||
modelData: [], |
||||
submiting: false |
||||
}; |
||||
}, |
||||
components: { |
||||
org |
||||
}, |
||||
watch: { |
||||
keyword: function(val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted() {}, |
||||
methods: { |
||||
getData() { |
||||
const curNode = this.$refs.tree.$refs.tree.getCurrentNode() // 获取当前选中的分类 |
||||
this.isTopLevel = !curNode.level && curNode.categoryName === '全部' |
||||
// 如果是首级，要调另一个接口 |
||||
if (this.isTopLevel) { |
||||
this.$post(this.api.getAllModelList, { |
||||
modelName: this.keyword, |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
systemId: this.systemId |
||||
}).then(res => { |
||||
this.listData = res.data.records |
||||
this.total = res.data.total |
||||
}).catch(res => {}) |
||||
} else { |
||||
this.$post(this.api.referenceDemoList, { |
||||
modelName: this.keyword, |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
categoryId: curNode.id |
||||
}).then(res => { |
||||
this.listData = res.data.records |
||||
this.total = res.data.total |
||||
}).catch(res => {}) |
||||
} |
||||
}, |
||||
initData() { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 导入模型 |
||||
add() { |
||||
if (!this.$refs.tree.orgList.length) return this.$message.error('请先添加模型分类') |
||||
if (this.isTopLevel) return this.$message.error('请选择子分类进入导入模型') |
||||
this.modelVisible = true |
||||
this.modelLoading = true |
||||
// 获取模型列表，用以跟源模型列表作比对，重复的不再显示 |
||||
this.$post(this.api.getAllModelList, { |
||||
pageNum: 1, |
||||
pageSize: 10000, |
||||
systemId: this.systemId |
||||
}).then(res => { |
||||
const modelList = res.data.records |
||||
|
||||
// 查询源模型分类 |
||||
this.$post(this.api.sourceModelClassification).then(res => { |
||||
let { data } = res |
||||
const promises = [] |
||||
const addType = list => { |
||||
list.map((e, i) => { |
||||
// 用promise储存以添加完后更新数据 |
||||
promises.push(new Promise((resolve,reject) => { |
||||
// 获取源模型列表 |
||||
this.$post(this.api.sysModelDemoList, { |
||||
pageNum: 1, |
||||
pageSize: 10000, |
||||
categoryId: e.id |
||||
}).then(res => { |
||||
const { records } = res.data |
||||
const modelChildren = [] |
||||
// 判重，重复的模型不再显示，通过模型的copyId和源模型的id作比对 |
||||
records.map(n => { |
||||
if (!modelList.find(e => e.copyId === n.id)) { |
||||
n.categoryName = n.modelName |
||||
modelChildren.push(n) |
||||
} |
||||
}) |
||||
// 如果有未导入的模型，则添加到子级，否则设置为disabled |
||||
if (modelChildren.length) { |
||||
e.children = [...e.children, ...modelChildren] |
||||
} else if (records.length) { |
||||
e.disabled = true |
||||
} |
||||
resolve() |
||||
}).catch(res => { |
||||
reject() |
||||
}) |
||||
})) |
||||
e.children && e.children.length && addType(e.children) |
||||
}) |
||||
} |
||||
addType(data) |
||||
// 筛选出disabled不为true的分类，因为没有模型的分类不需要展示 |
||||
const handleType = list => { |
||||
return list.filter((e, i) => { |
||||
return !e.disabled |
||||
}).map(e => { |
||||
if (e.children) { |
||||
e.children = handleType(e.children) |
||||
} |
||||
return e |
||||
}) |
||||
} |
||||
Promise.all(promises).then(_ => { |
||||
data = handleType(data) |
||||
this.modelData = (data.length && data[0].children && data[0].children.length) ? data : [] |
||||
this.modelLoading = false |
||||
}).catch(res => {}) |
||||
}).catch(res => {}) |
||||
}).catch(res => {}) |
||||
}, |
||||
// 把删除了的分类去除 |
||||
|
||||
// 查看模型 |
||||
show(row) { |
||||
this.$router.push(`/addModel?categoryId=${this.$refs.tree.$refs.tree.getCurrentKey()}&id=${row.id}&show=1&model=1`) |
||||
}, |
||||
// 删除模型 |
||||
del(row) { |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(this.api.deleteReferenceDemo, [row.id]).then(res => { |
||||
this.$message.success("删除成功") |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
}, |
||||
handleSelectionChange(val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
// 批量删除 |
||||
batchDel() { |
||||
if (this.multipleSelection.length) { |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
let ids = this.multipleSelection.map(e => e.id) |
||||
this.$post(this.api.deleteReferenceDemo, ids).then(res => { |
||||
this.$refs.table.clearSelection() |
||||
this.$message.success("删除成功") |
||||
this.getData() |
||||
}).catch(res => {}) |
||||
}).catch(() => {}) |
||||
} else { |
||||
this.$message.error("请先选择模型 ！") |
||||
} |
||||
}, |
||||
handleCurrentChange(val) { |
||||
this.page = val |
||||
this.$router.push({ |
||||
path: 'backstage', |
||||
query: { |
||||
...this.$route.query, |
||||
page: val |
||||
} |
||||
}) |
||||
this.getData() |
||||
}, |
||||
// 导入模型提交 |
||||
submit() { |
||||
if (this.submiting) return false |
||||
const data = [] |
||||
const systemId = this.systemId |
||||
if (this.$refs.model) { |
||||
const list = this.$refs.model.getCheckedNodes() // 获取选择的分类模型 |
||||
const categoryId = this.$refs.tree.$refs.tree.getCurrentKey() // 获取当前分类 |
||||
if (!list.length) return this.$message.error('请选择模型') |
||||
this.submiting = true |
||||
list.map(e => { |
||||
// 有categoryId的才是模型，只导入模型，不导入分类 |
||||
e.categoryId && data.push({ |
||||
systemId, |
||||
categoryId, |
||||
copyId: e.id |
||||
}) |
||||
}) |
||||
this.$post(this.api.saveReferenceDemo, data).then(res => { |
||||
this.modelVisible = false |
||||
this.initData() |
||||
setTimeout(() => { |
||||
this.submiting = false |
||||
}, 2000) |
||||
}).catch(res => { |
||||
this.submiting = false |
||||
}) |
||||
} else { |
||||
this.submiting = false |
||||
this.modelVisible = false |
||||
} |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
display: flex; |
||||
min-height: calc(100vh - 310px); |
||||
padding: 0 24px; |
||||
.side { |
||||
width: 300px; |
||||
padding: 24px 10px 24px 0; |
||||
margin-right: 24px; |
||||
border-right: 1px solid rgba(0, 0, 0, 0.06); |
||||
} |
||||
.right { |
||||
width: calc(100% - 374px); |
||||
padding: 24px; |
||||
} |
||||
} |
||||
.el-input__inner{ |
||||
height: 32px; |
||||
} |
||||
.model-wrap { |
||||
max-height: 400px; |
||||
overflow: auto; |
||||
.none { |
||||
text-align: center; |
||||
color: #8b8b8b; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,321 @@ |
||||
<template> |
||||
<div> |
||||
<div> |
||||
<div class="front-switch"> |
||||
<el-switch v-model="modelIsShow" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
active-text="内置模型按钮前台展示" |
||||
@change="changeModelStatus"></el-switch> |
||||
</div> |
||||
<div class="flex-between m-b-20"> |
||||
<el-button type="text" |
||||
icon="el-icon-refresh" |
||||
@click="syncModel">同步原始模型列表</el-button> |
||||
<el-button type="text" |
||||
@click="addType(0)">添加</el-button> |
||||
</div> |
||||
<org-tree v-if="orgList.length" |
||||
:data="orgList" |
||||
default-expand-all |
||||
ref="tree" |
||||
node-key="id" |
||||
highlight-current |
||||
:expand-on-click-node="false" |
||||
@node-click="getSingle" |
||||
:props="{children: 'children', label: 'categoryName', isLeaf: 'leaf'}"> |
||||
<span class="custom-tree-node" |
||||
slot-scope="{ node, data }"> |
||||
<span style="display: inline-block; margin-right: 20px">{{ node.label }}</span> |
||||
<span> |
||||
<el-button type="text" |
||||
icon="el-icon-edit-outline" |
||||
@click="editType(data)"> |
||||
</el-button> |
||||
<el-button type="text" |
||||
icon="el-icon-circle-plus-outline" |
||||
@click="addType(node, data)"> |
||||
</el-button> |
||||
<el-button type="text" |
||||
icon="el-icon-delete" |
||||
@click="delType(data)"> |
||||
</el-button> |
||||
</span> |
||||
</span> |
||||
</org-tree> |
||||
<div class="none" |
||||
v-else>暂无数据，请点击添加按钮添加模型分类</div> |
||||
</div> |
||||
|
||||
<el-dialog :title="Form.id ? '编辑分类' : '新增分类'" |
||||
:visible.sync="typeVisible" |
||||
width="24%" |
||||
center |
||||
@close="closeDia" |
||||
:close-on-click-modal="false"> |
||||
<el-form ref="Form" |
||||
:model="Form" |
||||
:rules="rules"> |
||||
<el-form-item prop="categoryName"> |
||||
<el-input placeholder="请输入分类名称" |
||||
v-model="Form.categoryName"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" |
||||
class="dialog-footer"> |
||||
<el-button @click="typeVisible = false">取 消</el-button> |
||||
<el-button type="primary" |
||||
@click="submit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import OrgTree from "@/components/org-tree/src/tree"; |
||||
export default { |
||||
props: ["Data"], |
||||
data () { |
||||
return { |
||||
systemId: this.$route.query.systemId, |
||||
modelIsShow: false, |
||||
orgList: [], |
||||
typeVisible: false, |
||||
Form: { |
||||
id: '', |
||||
parentId: '', |
||||
categoryName: '', |
||||
level: '' |
||||
}, |
||||
rules: { |
||||
categoryName: [ |
||||
{ required: true, message: "请输入分类名称", trigger: "blur" } |
||||
] |
||||
} |
||||
}; |
||||
}, |
||||
components: { |
||||
OrgTree |
||||
}, |
||||
mounted () { |
||||
this.getType() |
||||
this.getModelStatus() |
||||
}, |
||||
methods: { |
||||
// 获取分类 |
||||
getType () { |
||||
this.$post(`${this.api.modelClassList}?systemId=${this.systemId}`).then(res => { |
||||
const { data } = res |
||||
this.orgList = data |
||||
data.length && this.$nextTick(() => { |
||||
const categoryId = this.$route.query.categoryId |
||||
this.$refs.tree.setCurrentKey(categoryId || data[0].id) |
||||
this.$router.push({ |
||||
path: 'backstage', |
||||
query: { |
||||
...this.$route.query, |
||||
categoryId: this.$refs.tree.getCurrentKey() |
||||
} |
||||
}).catch(err => { }) |
||||
this.$emit('getData') |
||||
}) |
||||
}).catch(res => { }) |
||||
}, |
||||
// 获取内置模型按钮展示状态 |
||||
getModelStatus () { |
||||
this.$post(`${this.api.checkIsShowBySystemId}?systemId=${this.systemId}`).then(res => { |
||||
this.modelIsShow = res.isShow // 0为展示 1为不展示 |
||||
}).catch(res => { }) |
||||
}, |
||||
// 改变内置模型按钮展示状态 |
||||
changeModelStatus (val) { |
||||
this.$post(`${this.api.modifyIsShowState}?systemId=${this.systemId}&isShow=${val}`).then(res => { }).catch(res => { }) |
||||
}, |
||||
getSingle () { |
||||
this.$router.push({ |
||||
path: 'backstage', |
||||
query: { |
||||
...this.$route.query, |
||||
categoryId: this.$refs.tree.getCurrentKey() |
||||
} |
||||
}).catch(err => { }) |
||||
this.$emit('initData') |
||||
}, |
||||
syncModelData () { |
||||
// 同步原始模型前删除原有数据 |
||||
this.$post(`${this.api.delModelInfoBySystemId}?systemId=${this.systemId}`).then(res => { |
||||
this.$post(`${this.api.synchronizationMdel}?systemId=${this.systemId}`).then(res => { |
||||
this.$router.push({ |
||||
path: 'backstage', |
||||
query: { |
||||
...this.$route.query, |
||||
categoryId: '' |
||||
} |
||||
}) |
||||
this.getType() |
||||
}) |
||||
}).catch(() => { }) |
||||
}, |
||||
syncModel () { |
||||
if (this.orgList.length) { |
||||
this.$confirm('同步后当前的组织架构将会被删除，是否继续？', '提示', { |
||||
type: 'warning' |
||||
}).then(() => { |
||||
this.syncModelData() |
||||
}).catch(() => { }) |
||||
} else { |
||||
this.syncModelData() |
||||
} |
||||
}, |
||||
// 添加分类和模型 |
||||
async addData (id) { |
||||
// 查询源模型分类 |
||||
this.$post(this.api.sourceModelClassification).then(res => { |
||||
const { data } = res |
||||
const systemId = this.systemId |
||||
const promises = [] |
||||
// 递归添加源模型分类及模型 |
||||
const addType = async (list, refId) => { |
||||
for (const e of list) { |
||||
// 用promise储存以添加完后更新数据 |
||||
// promises.push(new Promise(async (resolve, reject) => { |
||||
// 新增分类 |
||||
await this.$post(this.api.saveReferenceCategory, { |
||||
id: '', |
||||
categoryName: e.categoryName, |
||||
systemId, |
||||
level: e.level, |
||||
parentId: refId || id, |
||||
founder: 1 |
||||
}).then(async res => { |
||||
const referenceCategoryId = res.referenceCategoryId // 把新增返回的id作为子级的parentId |
||||
|
||||
// 查询源模型列表 |
||||
promises.push(new Promise((resolve1, reject1) => { |
||||
this.$post(this.api.sysModelDemoList, { |
||||
pageNum: 1, |
||||
pageSize: 10000, |
||||
categoryId: e.id |
||||
}).then(res => { |
||||
let { records } = res.data |
||||
records = records.filter(e => e.postStatus && !e.isOpen) // 只同步已发布且启用的源模型 |
||||
if (records.length) { |
||||
const modelData = [] |
||||
// 处理新增模型需要的参数 |
||||
records.map(e => { |
||||
modelData.push({ |
||||
systemId, |
||||
categoryId: referenceCategoryId, |
||||
copyId: e.id |
||||
}) |
||||
}) |
||||
// 新增模型 |
||||
this.$post(this.api.saveReferenceDemo, modelData).then(res => { |
||||
// resolve() |
||||
resolve1() |
||||
}).catch(res => { |
||||
// reject() |
||||
reject1() |
||||
}) |
||||
} else { |
||||
// resolve() |
||||
} |
||||
e.children = [...e.children, ...records] |
||||
}).catch(res => { |
||||
// reject() |
||||
}) |
||||
})) |
||||
|
||||
// 如果有子级，则递归循环 |
||||
this.$nextTick(() => { |
||||
e.children && e.children.length && addType(e.children, res.referenceCategoryId) |
||||
}) |
||||
}).catch(res => { |
||||
// reject() |
||||
}) |
||||
// })) |
||||
} |
||||
} |
||||
addType(data[0].children, id) |
||||
Promise.all(promises).then(_ => { |
||||
setTimeout(this.getType, 500) |
||||
}) |
||||
}).catch(res => { }) |
||||
}, |
||||
// 添加分类 |
||||
addType (node, data) { |
||||
this.typeVisible = true |
||||
this.Form.parentId = data ? data.id : 0 |
||||
this.Form.level = node ? node.level : 0 |
||||
}, |
||||
// 编辑分类 |
||||
editType (data) { |
||||
this.Form.id = data.id |
||||
this.Form.parentId = data ? data.parentId : 0 |
||||
this.Form.categoryName = data.categoryName |
||||
this.typeVisible = true |
||||
}, |
||||
// 保存分类 |
||||
submit () { |
||||
this.$refs['Form'].validate((valid) => { |
||||
if (valid) { |
||||
const form = this.Form |
||||
const data = { |
||||
id: form.id, |
||||
parentId: form.parentId, |
||||
categoryName: form.categoryName, |
||||
systemId: this.systemId, |
||||
founder: 1 |
||||
} |
||||
if (data.id) { |
||||
this.$post(this.api.updateModelClass, data).then(res => { |
||||
this.$message.success("编辑成功") |
||||
this.typeVisible = false |
||||
this.getType() |
||||
}).catch(res => { }) |
||||
} else { |
||||
data.level = form.level |
||||
this.$post(this.api.saveReferenceCategory, data).then(res => { |
||||
this.$message.success("添加成功") |
||||
this.typeVisible = false |
||||
this.getType() |
||||
}).catch(res => { }) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
closeDia () { |
||||
this.$refs.Form.resetFields() |
||||
this.Form = { |
||||
id: '', |
||||
parentId: '', |
||||
categoryName: '' |
||||
} |
||||
}, |
||||
// 删除分类 |
||||
delType (item) { |
||||
this.$confirm("确定要删除分类吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteModelClass}?categoryId=${item.id}`).then(res => { |
||||
this.$message.success("删除成功") |
||||
this.$emit('initData') |
||||
this.getType() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.front-switch { |
||||
padding-bottom: 10px; |
||||
margin-bottom: 5px; |
||||
border-bottom: 1px solid #f0f0f0; |
||||
} |
||||
.none { |
||||
margin-top: 20px; |
||||
text-align: center; |
||||
color: #909399; |
||||
font-size: 12px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,260 @@ |
||||
<template> |
||||
<div class="wrap"> |
||||
<div class="side"> |
||||
<org ref="tree" |
||||
@initData="initData" |
||||
@getData="getData"></org> |
||||
</div> |
||||
|
||||
<div class="right"> |
||||
<h6 class="p-title">筛选</h6> |
||||
<div class="tool"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<el-input placeholder="请输入模型名称" |
||||
prefix-icon="el-icon-search" |
||||
v-model.trim="keyword" |
||||
clearable></el-input> |
||||
</li> |
||||
</ul> |
||||
<div> |
||||
<el-button type="primary" |
||||
round |
||||
@click="add">新增模型</el-button> |
||||
<el-button type="primary" |
||||
round |
||||
@click="batchDel">批量删除</el-button> |
||||
<el-button type="primary" |
||||
round |
||||
@click="batchOff(1)">批量禁用</el-button> |
||||
<el-button type="primary" |
||||
round |
||||
@click="batchOff(0)">批量开启</el-button> |
||||
</div> |
||||
</div> |
||||
|
||||
<el-table :data="listData" |
||||
class="table" |
||||
ref="table" |
||||
stripe |
||||
header-align="center" |
||||
@selection-change="handleSelectionChange"> |
||||
<el-table-column type="selection" |
||||
width="55" |
||||
align="center"></el-table-column> |
||||
<el-table-column type="index" |
||||
label="序号" |
||||
width="55" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="modelName" |
||||
label="模型名称" |
||||
align="center"></el-table-column> |
||||
<el-table-column v-if="isTopLevel" |
||||
prop="categoryName" |
||||
label="分类" |
||||
width="150" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="modifyName" |
||||
label="编辑人" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="updateTime" |
||||
label="最新编辑时间" |
||||
width="150" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="workNumber" |
||||
label="状态" |
||||
width="100" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ scope.row.postStatus ? '已发布' : '草稿' }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column label="操作" |
||||
width="230"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" |
||||
@click="show(scope.row)">查看</el-button> |
||||
<el-button type="text" |
||||
@click="edit(scope.row)">编辑</el-button> |
||||
<el-button type="text" |
||||
@click="del(scope.row)">删除</el-button> |
||||
<el-switch v-if="scope.row.postStatus" |
||||
v-model="scope.row.isOpen" |
||||
:active-value="0" |
||||
:inactive-value="1" |
||||
style="margin: 0 10px 0 5px" |
||||
:active-text="scope.row.isOpen ? '禁用' : '启用'" |
||||
@change="switchOff($event,scope.row,scope.$index)"></el-switch> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background |
||||
layout="total, prev, pager, next" |
||||
:current-page="page" |
||||
@current-change="handleCurrentChange" |
||||
:total="total"></el-pagination> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import org from "./sourceType" |
||||
export default { |
||||
data () { |
||||
return { |
||||
systemId: this.$route.query.systemId, |
||||
isTopLevel: true, // 是否是在顶级分类 |
||||
listData: [], |
||||
keyword: "", |
||||
page: +this.$route.query.page || 1, |
||||
pageSize: 10, |
||||
total: 0, |
||||
multipleSelection: [] |
||||
}; |
||||
}, |
||||
components: { |
||||
org |
||||
}, |
||||
watch: { |
||||
keyword: function (val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData() |
||||
}, 500) |
||||
} |
||||
}, |
||||
mounted () { |
||||
|
||||
}, |
||||
methods: { |
||||
// 获取列表 |
||||
getData () { |
||||
const curNode = this.$refs.tree.$refs.tree.getCurrentNode() // 获取当前选中的分类 |
||||
this.isTopLevel = !curNode.level |
||||
// 如果是首级，要调另一个接口 |
||||
if (!curNode.level) { |
||||
this.$post(this.api.getAllModelListBySys, { |
||||
modelName: this.keyword, |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize |
||||
}).then(res => { |
||||
this.listData = res.data.records |
||||
this.total = res.data.total |
||||
}).catch(res => { }) |
||||
} else { |
||||
this.$post(this.api.queryTheModelOfOurSchool, { |
||||
modelName: this.keyword, |
||||
pageNum: this.page, |
||||
pageSize: this.pageSize, |
||||
categoryId: curNode.id, |
||||
systemId: this.systemId |
||||
}).then(res => { |
||||
this.listData = res.data.records |
||||
this.total = res.data.total |
||||
}).catch(res => { }) |
||||
} |
||||
}, |
||||
initData () { |
||||
this.$refs.table.clearSelection() |
||||
this.page = 1 |
||||
this.getData() |
||||
}, |
||||
// 新增 |
||||
add () { |
||||
this.$router.push(`addModel?categoryId=${this.$refs.tree.$refs.tree.getCurrentKey()}&systemId=${this.systemId}`) |
||||
}, |
||||
// 批量删除 |
||||
batchDel () { |
||||
if (this.multipleSelection.length) { |
||||
// 批量删除 |
||||
let ids = this.multipleSelection.map(e => e.id) |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(this.api.deleteSysModelDemo, ids).then(res => { |
||||
this.$message.success('删除成功') |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} else { |
||||
this.$message.error("请先选择模型 ！") |
||||
} |
||||
}, |
||||
// 批量禁用启用 |
||||
batchOff (isOpen) { |
||||
const off = isOpen === 0 |
||||
if (this.multipleSelection.length) { |
||||
// 批量删除 |
||||
let ids = this.multipleSelection.map(e => e.id) |
||||
this.$confirm(`确定要${off ? '启用' : '禁用'}吗？`, "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.bulkDisable}?isOpen=${isOpen}`, ids).then(res => { |
||||
this.$message.success(`${off ? '启用' : '禁用'}成功`) |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} else { |
||||
this.$message.error("请先选择模型 ！") |
||||
} |
||||
}, |
||||
// 查看 |
||||
show (row) { |
||||
this.$router.push(`/addModel?categoryId=${this.$refs.tree.$refs.tree.getCurrentKey()}&id=${row.id}&show=1`) |
||||
}, |
||||
// 编辑 |
||||
edit (row) { |
||||
this.$router.push(`/addModel?categoryId=${this.$refs.tree.$refs.tree.getCurrentKey()}&id=${row.id}&postStatus=${row.postStatus}`) |
||||
}, |
||||
del (row) { |
||||
this.$confirm("确定要删除吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(this.api.deleteSysModelDemo, [row.id]).then(res => { |
||||
this.$message.success('删除成功') |
||||
this.getData() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
}, |
||||
switchOff (val, row, index) { |
||||
this.$post(`${this.api.bulkDisable}?isOpen=${val}`, [row.id]).then(res => { |
||||
this.$message.success(val ? '禁用成功' : '启用成功') |
||||
}).catch(res => { }) |
||||
}, |
||||
handleSelectionChange (val) { |
||||
this.multipleSelection = val |
||||
}, |
||||
handleCurrentChange (val) { |
||||
this.page = val |
||||
this.$router.push({ |
||||
path: 'backstage', |
||||
query: { |
||||
...this.$route.query, |
||||
page: val |
||||
} |
||||
}) |
||||
this.getData() |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
.wrap { |
||||
display: flex; |
||||
padding: 0 24px; |
||||
.side { |
||||
width: 300px; |
||||
padding: 24px 10px 24px 0; |
||||
margin-right: 24px; |
||||
border-right: 1px solid rgba(0, 0, 0, 0.06); |
||||
} |
||||
.right { |
||||
width: calc(100% - 374px); |
||||
padding: 24px; |
||||
} |
||||
} |
||||
.el-input__inner { |
||||
height: 32px; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,180 @@ |
||||
<template> |
||||
<div> |
||||
<div> |
||||
<org-tree :data="orgList" |
||||
default-expand-all |
||||
ref="tree" |
||||
node-key="id" |
||||
highlight-current |
||||
:expand-on-click-node="false" |
||||
@node-click="getSingle" |
||||
:props="{children: 'children', label: 'categoryName', isLeaf: 'leaf'}"> |
||||
<span class="custom-tree-node" |
||||
slot-scope="{ node, data }"> |
||||
<span style="display: inline-block; margin-right: 20px">{{ node.label }}</span> |
||||
<span> |
||||
<el-button v-if="node.level > 1" |
||||
type="text" |
||||
icon="el-icon-edit-outline" |
||||
@click="editType(data)"> |
||||
</el-button> |
||||
<el-button type="text" |
||||
icon="el-icon-circle-plus-outline" |
||||
@click="addType(node, data)"> |
||||
</el-button> |
||||
<el-button v-if="node.level > 1" |
||||
type="text" |
||||
icon="el-icon-delete" |
||||
@click="delType(data)"> |
||||
</el-button> |
||||
</span> |
||||
</span> |
||||
</org-tree> |
||||
</div> |
||||
|
||||
<el-dialog :title="Form.id ? '编辑分类' : '新增分类'" |
||||
:visible.sync="typeVisible" |
||||
width="24%" |
||||
center |
||||
@close="closeDia" |
||||
:close-on-click-modal="false"> |
||||
<el-form ref="Form" |
||||
:model="Form" |
||||
:rules="rules"> |
||||
<el-form-item prop="categoryName"> |
||||
<el-input placeholder="请输入分类名称" |
||||
v-model="Form.categoryName"></el-input> |
||||
</el-form-item> |
||||
</el-form> |
||||
<span slot="footer" |
||||
class="dialog-footer"> |
||||
<el-button @click="typeVisible = false">取 消</el-button> |
||||
<el-button type="primary" |
||||
@click="submit">确 定</el-button> |
||||
</span> |
||||
</el-dialog> |
||||
</div> |
||||
</template> |
||||
<script> |
||||
import OrgTree from "@/components/org-tree/src/tree"; |
||||
export default { |
||||
props: ["Data"], |
||||
data () { |
||||
return { |
||||
systemId: this.$route.query.systemId, |
||||
orgList: [], |
||||
typeVisible: false, |
||||
Form: { |
||||
id: '', |
||||
parentId: '', |
||||
categoryName: '', |
||||
level: '' |
||||
}, |
||||
rules: { |
||||
categoryName: [ |
||||
{ required: true, message: "请输入分类名称", trigger: "blur" } |
||||
] |
||||
} |
||||
}; |
||||
}, |
||||
components: { |
||||
OrgTree |
||||
}, |
||||
mounted () { |
||||
this.getType() |
||||
}, |
||||
methods: { |
||||
getType () { |
||||
this.$post(`${this.api.schoolModelClassification}?systemId=${this.systemId}&type=1`).then(res => { |
||||
const { data } = res |
||||
this.orgList = data |
||||
data.length && this.$nextTick(() => { |
||||
const categoryId = this.$route.query.categoryId |
||||
this.$refs.tree.setCurrentKey(categoryId || data[0].id) |
||||
this.$router.push({ |
||||
path: 'backstage', |
||||
query: { |
||||
...this.$route.query, |
||||
categoryId: this.$refs.tree.getCurrentKey() |
||||
} |
||||
}).catch(err => { }) |
||||
this.$emit('getData') |
||||
}) |
||||
}).catch(res => { }) |
||||
}, |
||||
getSingle () { |
||||
this.$router.push({ |
||||
path: 'backstage', |
||||
query: { |
||||
...this.$route.query, |
||||
categoryId: this.$refs.tree.getCurrentKey() |
||||
} |
||||
}).catch(err => { }) |
||||
this.$emit('initData') |
||||
}, |
||||
// 添加分类 |
||||
addType (node, data) { |
||||
this.typeVisible = true |
||||
this.Form.parentId = data ? data.id : 0 |
||||
this.Form.level = node ? node.level : 0 |
||||
}, |
||||
// 编辑分类 |
||||
editType (data) { |
||||
this.Form.id = data.id |
||||
this.Form.parentId = data ? data.parentId : 0 |
||||
this.Form.categoryName = data.categoryName |
||||
this.typeVisible = true |
||||
}, |
||||
// 保存分类 |
||||
submit () { |
||||
this.$refs['Form'].validate((valid) => { |
||||
if (valid) { |
||||
const form = this.Form |
||||
const data = { |
||||
id: form.id, |
||||
parentId: form.parentId, |
||||
categoryName: form.categoryName, |
||||
systemId: this.systemId |
||||
} |
||||
if (data.id) { |
||||
this.$post(this.api.updateSourceModelCategory, data).then(res => { |
||||
this.$message.success("编辑成功") |
||||
this.typeVisible = false |
||||
this.getType() |
||||
}).catch(res => { }) |
||||
} else { |
||||
data.level = form.level |
||||
this.$post(this.api.categorySave, data).then(res => { |
||||
this.$message.success("添加成功") |
||||
this.typeVisible = false |
||||
this.getType() |
||||
}).catch(res => { }) |
||||
} |
||||
} |
||||
}) |
||||
}, |
||||
closeDia () { |
||||
this.$refs.Form.resetFields() |
||||
this.Form = { |
||||
id: '', |
||||
parentId: '', |
||||
categoryName: '' |
||||
} |
||||
}, |
||||
// 删除分类 |
||||
delType (item) { |
||||
this.$confirm("确定要删除分类吗？", "提示", { |
||||
type: "warning" |
||||
}).then(() => { |
||||
this.$post(`${this.api.deleteSourceModelCategory}?categoryId=${item.id}`).then(res => { |
||||
this.$message.success("删除成功") |
||||
this.$emit('initData') |
||||
this.getType() |
||||
}).catch(res => { }) |
||||
}).catch(() => { }) |
||||
} |
||||
} |
||||
}; |
||||
</script> |
||||
<style lang="scss" scoped> |
||||
</style> |
||||
@ -0,0 +1,169 @@ |
||||
<template> |
||||
<div> |
||||
<div class="page"> |
||||
<h6 class="p-title">筛选</h6> |
||||
<div class="tool mul"> |
||||
<ul class="filter"> |
||||
<li> |
||||
<label>系统类型</label> |
||||
<el-select v-model="systemType" |
||||
clearable |
||||
placeholder="请选择系统类型" |
||||
@change="initData"> |
||||
<el-option v-for="(item,index) in systemTypeList" |
||||
:key="index" |
||||
:label="item.label" |
||||
:value="item.value"></el-option> |
||||
</el-select> |
||||
</li> |
||||
<li> |
||||
<el-input placeholder="请输入系统名称" |
||||
prefix-icon="el-icon-search" |
||||
v-model.trim="systemSearch" |
||||
clearable></el-input> |
||||
</li> |
||||
</ul> |
||||
</div> |
||||
|
||||
<el-table :data="systemData" |
||||
class="table" |
||||
stripe |
||||
header-align="center"> |
||||
<el-table-column type="index" |
||||
width="100" |
||||
label="序号" |
||||
align="center"> |
||||
</el-table-column> |
||||
<el-table-column prop="systemName" |
||||
label="系统名称" |
||||
align="center"></el-table-column> |
||||
<el-table-column prop="type" |
||||
label="系统类型" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ systemTypeKeys[scope.row.type] }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="state" |
||||
label="系统状态" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
{{ systemStatusKeys[scope.row.state] }} |
||||
</template> |
||||
</el-table-column> |
||||
<el-table-column prop="payamount" |
||||
label="系统后台" |
||||
align="center"> |
||||
<template slot-scope="scope"> |
||||
<el-button type="text" |
||||
@click="toBackstage(scope.row)" |
||||
v-if="scope.row.systemId !== '11'" |
||||
v-auth="'/configure:系统后台进入'">进入</el-button> |
||||
</template> |
||||
</el-table-column> |
||||
</el-table> |
||||
<div class="pagination"> |
||||
<el-pagination background |
||||
@current-change="handleCurrentChange" |
||||
layout="total, prev, pager, next" |
||||
:total="totals"> |
||||
</el-pagination> |
||||
</div> |
||||
</div> |
||||
|
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import Setting from "@/setting"; |
||||
export default { |
||||
data () { |
||||
return { |
||||
systemAttribution: "", |
||||
systemType: "", |
||||
systemSearch: "", |
||||
searchTimer: null, |
||||
systemData: [{}], |
||||
totals: 0, |
||||
systemBelongKeys: { |
||||
1: '外部产品', |
||||
0: '内部系统' |
||||
}, |
||||
systemTypeList: [ |
||||
{ |
||||
label: "编程类", |
||||
value: 0 |
||||
}, |
||||
{ |
||||
label: "流程类", |
||||
value: 1 |
||||
} |
||||
], |
||||
systemTypeKeys: { |
||||
0: '编程类', |
||||
1: '流程类' |
||||
}, |
||||
systemStatusKeys: { |
||||
0: '运行中', |
||||
1: '默认' |
||||
}, |
||||
pageNo: +this.$route.query.page || 1, |
||||
pageSize: 10 |
||||
}; |
||||
}, |
||||
watch: { |
||||
systemSearch: function (val) { |
||||
clearTimeout(this.searchTimer); |
||||
this.searchTimer = setTimeout(() => { |
||||
this.initData(); |
||||
}, 500); |
||||
} |
||||
}, |
||||
mounted () { |
||||
this.getData(); |
||||
}, |
||||
methods: { |
||||
initData () { |
||||
this.pageNum = 1; |
||||
this.getData(); |
||||
}, |
||||
getData () { |
||||
let data = { |
||||
belong: this.systemAttribution, |
||||
type: this.systemType, |
||||
systemName: this.systemSearch, |
||||
pageNum: this.pageNo, |
||||
pageSize: this.pageSize, |
||||
supplierId: '' |
||||
}; |
||||
this.$post(this.api.getAllService, data).then(res => { |
||||
this.systemData = res.serviceList.records; |
||||
this.totals = res.serviceList.total; |
||||
}).catch(res => { |
||||
}); |
||||
}, |
||||
handleCurrentChange (val) { |
||||
this.pageNo = val; |
||||
this.$router.push(`list?page=${val}`) |
||||
this.getData(); |
||||
}, |
||||
edit (row) { |
||||
this.$router.push('configure'); |
||||
}, |
||||
// 进入系统后台 |
||||
toBackstage (row) { |
||||
this.$router.push(`backstage?systemId=${row.systemId}&show=1&name=${row.systemName}`) |
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.card { |
||||
min-height: calc(100vh - 300px); |
||||
} |
||||
.mag { |
||||
margin-right: 20px; |
||||
} |
||||
</style> |
||||
|
||||
@ -0,0 +1,35 @@ |
||||
import BasicLayout from "@/layouts/home"; |
||||
|
||||
const meta = {}; |
||||
|
||||
const pre = "expSystem-"; |
||||
|
||||
export default { |
||||
path: "/expSystem", |
||||
name: "expSystem", |
||||
redirect: { |
||||
name: `${pre}list` |
||||
}, |
||||
meta, |
||||
component: BasicLayout, |
||||
children: [ |
||||
{ |
||||
name: `${pre}list`, |
||||
path: `list`, |
||||
component: () => import("@/pages/expSystem/list"), |
||||
meta: { title: "实验系统管理" } |
||||
}, |
||||
{ |
||||
name: `${pre}backstage`, |
||||
path: `backstage`, |
||||
component: () => import("@/pages/expSystem/backstage"), |
||||
meta: { title: "系统后台" } |
||||
}, |
||||
{ |
||||
name: `${pre}addModel`, |
||||
path: `addModel`, |
||||
component: () => import("@/pages/expSystem/backstage/addModel"), |
||||
meta: { title: "新增源模型" } |
||||
} |
||||
] |
||||
}; |
||||
Loading…
Reference in new issue