<template>
|
<div class="mod-config">
|
<basic-container>
|
<el-row>
|
<el-col :span="12">
|
<ttable
|
:table="table"
|
@currentChange="handleCurrentChange"
|
:uploadInfo="uploadInfo"
|
:prelang="prelang"
|
:options="options"
|
:ajaxFun="ajaxFun"
|
ref="templateTable"
|
>
|
<template #toolbar></template>
|
</ttable>
|
</el-col>
|
<el-col :span="12" style="padding-left: 10px">
|
<el-card>
|
<div slot="header">
|
<el-row>
|
<el-col :span="8">
|
<span>参数</span>
|
</el-col>
|
<el-col :span="8" :offset="6">
|
<el-button
|
style="float: right; padding: 3px 0"
|
type="text"
|
@click="relateOperationParam()"
|
>添加</el-button
|
>
|
</el-col>
|
</el-row>
|
</div>
|
<el-table
|
:data="operationParams"
|
id="templateParamTable"
|
ref="operationParam"
|
:default-sort="{ prop: 'index' }"
|
highlight-current-row
|
height="700"
|
style="width: 100%"
|
class="l-mes-table basic-template-table"
|
border
|
stripe
|
>
|
<el-table-column
|
prop="index"
|
label="序号"
|
width="50"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<div style="display:flex">
|
<span style="width:20px;">
|
<i class="icon aufontAll h-icon-all-drag"></i
|
></span>
|
<span>{{ scope.row.index }}</span>
|
</div>
|
</template>
|
</el-table-column>
|
<el-table-column label="参数编号" prop="code" align="center">
|
</el-table-column>
|
<el-table-column
|
label="参数项"
|
prop="parameterItem"
|
align="center"
|
>
|
</el-table-column>
|
<!-- <el-table-column
|
label="参数类型"
|
prop="type"
|
align="center"
|
:formatter="getParam"
|
>
|
</el-table-column>
|
|
<el-table-column
|
prop="defaultValue"
|
label="默认值"
|
align="center"
|
>
|
<template slot-scope="scope">
|
<template v-if="!scope.row.isUpdate"
|
>{{ getValueStr(scope.row) }}
|
</template>
|
<el-input
|
v-model="scope.row.defaultValue"
|
placeholder="默认值"
|
v-if="scope.row.type != 2 && scope.row.isUpdate"
|
:ref="'reference_' + scope.$index"
|
></el-input>
|
<el-select
|
v-if="scope.row.type == 2 && scope.row.isUpdate"
|
:ref="'reference_' + scope.$index"
|
v-model="scope.row.defaultValue"
|
>
|
<el-option
|
v-for="item in scope.row.sysDictItemList"
|
:key="item.value"
|
:label="item.label"
|
:value="item.value"
|
/>
|
</el-select>
|
</template>
|
</el-table-column>
|
|
<el-table-column label="单位" prop="unit" align="center">
|
</el-table-column> -->
|
<el-table-column label="操作" align="center">
|
<template slot-scope="scope">
|
<el-button
|
type="text"
|
v-if="scope.row.isUpdate"
|
size="mini"
|
@click="saveSample(scope.$index, scope.row)"
|
>保存
|
</el-button>
|
<!-- <el-button
|
type="text"
|
v-if="!scope.row.isUpdate"
|
size="mini"
|
@click="editSample(scope.$index, scope.row)"
|
>编辑
|
</el-button> -->
|
<el-button
|
type="text"
|
size="mini"
|
@click.stop="insertTechnologyOperationParam(scope.row)"
|
>插入
|
</el-button>
|
<el-button
|
type="text"
|
size="mini"
|
@click.stop="deleteOperationParam(scope.row)"
|
>删除
|
</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
</el-card>
|
</el-col>
|
</el-row>
|
<!-- 弹窗, 新增 / 修改 -->
|
<table-form
|
v-if="addOrUpdateVisible"
|
ref="addOrUpdate"
|
@refreshDataList="getData"
|
></table-form>
|
<ParamDialog
|
:currshowlist.sync="showParam"
|
@handleSelectionChange="getJoinData"
|
:paramSelArr="paramSelArr"
|
:paramSelCol="paramSelCol"
|
></ParamDialog>
|
</basic-container>
|
</div>
|
</template>
|
<script>
|
import {
|
fetchList,
|
delObj,
|
putRelateOperationParamTemplate
|
} from '@/api/basic/template'
|
import TableForm from './template-form'
|
import ttable from '@/views/common/ztt-table.vue'
|
import ParamDialog from '@/views/common/param.vue'
|
import { mapGetters } from 'vuex'
|
import {
|
deleteOperationParamTemplate,
|
getOperationParam,
|
relateOperationParamTemplate
|
} from '../../../api/basic/template'
|
import { remote } from '@/api/admin/dict'
|
export default {
|
data() {
|
return {
|
paramSelArr: [],
|
paramSelCol: 'code',
|
templateIndex: null,
|
last: true,
|
templateId: 0,
|
newOperationParams: [],
|
operationParams: [],
|
showParam: false,
|
ajaxFun: fetchList,
|
typeOptions: [],
|
multipleSelection: [],
|
isShowQuery: false,
|
uploadInfo: {
|
// 是否展示上传EXCEL以及对应的url
|
isShow: false,
|
url: ''
|
},
|
prelang: 'operation',
|
options: {
|
height: 300, // 默认高度-为了表头固定
|
stripe: true, // 是否为斑马纹 table
|
highlightCurrentRow: false, // 是否要高亮当前行
|
border: true, // 是否有纵向边框
|
lazy: false, // 是否需要懒加载
|
fit: true, // 列的宽度是否自撑开
|
multiSelect: false, //
|
seqNo: true,
|
isShowHide: true, // 是否显示显影按钮
|
isSearch: true, // 高级查询按钮
|
defaultOrderBy: { column: 'id', direction: 'desc' }
|
},
|
table: {
|
total: 0,
|
currentPage: 1,
|
pageSize: 20,
|
data: [],
|
// 标题
|
column: [
|
{
|
minWidth: 'code',
|
prop: 'templateName',
|
label: '模板名称',
|
sort: true,
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text',
|
render: { fun: this.addOrUpdateHandle }
|
},
|
{
|
minWidth: '120',
|
prop: 'templateNo',
|
label: '模板编号',
|
sort: true,
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '140',
|
prop: 'templateType',
|
label: '模板类型',
|
sort: true,
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '120',
|
prop: 'dataType',
|
label: '所在页面',
|
sort: true,
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
},
|
{
|
minWidth: '120',
|
prop: 'remark',
|
label: '备注',
|
sort: true,
|
isTrue: true,
|
isSearch: true,
|
searchInfoType: 'text'
|
}
|
],
|
toolbar: [
|
{
|
text: '新增',
|
type: 'primary',
|
fun: this.addOrUpdateHandle
|
}
|
],
|
operator: [
|
{
|
text: '删除',
|
icon: 'el-icon-delete',
|
type: 'text',
|
size: 'small',
|
fun: this.deleteHandle
|
}
|
],
|
operatorConfig: {
|
fixed: 'right',
|
label: '操作',
|
width: 100,
|
minWidth: 100
|
}
|
},
|
addOrUpdateVisible: false
|
}
|
},
|
components: {
|
ttable,
|
TableForm,
|
ParamDialog
|
},
|
computed: {
|
...mapGetters(['permissions'])
|
},
|
mounted() {
|
this.getParamType()
|
this.rowDrop()
|
},
|
methods: {
|
// 获取数据列表
|
getData() {
|
this.$refs.templateTable.getDataList()
|
},
|
// 新增 / 修改
|
addOrUpdateHandle(row) {
|
this.addOrUpdateVisible = true
|
this.$nextTick(() => {
|
this.$refs.addOrUpdate.init(row == null ? null : row.id)
|
})
|
},
|
handleCurrentChange(val) {
|
this.templateId = val.id
|
if (val != null) {
|
this.operationParams = []
|
this.getJoinParamTemplateData()
|
} else {
|
this.operationParams = []
|
}
|
},
|
// 插入工序参数
|
insertTechnologyOperationParam(row) {
|
// 筛选出当前页面已有的参数
|
this.paramSelArr = []
|
if (this.operationParams.length > 0) {
|
this.operationParams.forEach((ele) => {
|
if (ele.code != null && ele.code != '') {
|
this.paramSelArr.push(ele.code)
|
}
|
})
|
}
|
this.showParam = true
|
this.last = false
|
this.templateIndex = row.index
|
},
|
// 获取关联的工序参数信息
|
getJoinParamTemplateData() {
|
getOperationParam(
|
Object.assign({
|
current: 1,
|
size: 999,
|
technologyOperationTemplateId: this.templateId
|
})
|
).then((response) => {
|
this.operationParams = response.data.data.records
|
})
|
},
|
rowDrop() {
|
const that = this
|
const tbody = document.querySelector(
|
'#templateParamTable .el-table__body-wrapper tbody'
|
)
|
Sortable.create(tbody, {
|
// 结束拖拽
|
onEnd({ newIndex, oldIndex }) {
|
if (newIndex > oldIndex) {
|
// 下移
|
that.operationParams
|
.filter((e) => e.index == oldIndex + 1)
|
.forEach((e) => (e.index = 'x'))
|
that.operationParams
|
.filter((e) => e.index > oldIndex + 1 && e.index <= newIndex + 1)
|
.forEach((e) => (e.index = e.index - 1))
|
that.operationParams
|
.filter((e) => e.index == 'x')
|
.forEach((e) => (e.index = newIndex + 1))
|
} else if (oldIndex > newIndex) {
|
// 上移
|
that.operationParams
|
.filter((e) => e.index == oldIndex + 1)
|
.forEach((e) => (e.index = 'x'))
|
that.operationParams
|
.filter((e) => e.index < oldIndex + 1 && e.index >= newIndex + 1)
|
.forEach((e) => (e.index = e.index + 1))
|
that.operationParams
|
.filter((e) => e.index == 'x')
|
.forEach((e) => (e.index = newIndex + 1))
|
}
|
// 拖拽结束后，保存页面工步
|
const allOperationParams = []
|
let allOperationParam
|
// 将原有工步放入allSteps
|
for (let j = 0, len = that.operationParams.length; j < len; j++) {
|
allOperationParam = {}
|
allOperationParam.technologyOperationTemplateId = that.templateId
|
allOperationParam.technologyOperationParamId =
|
that.operationParams[j].id
|
allOperationParam.sort = that.operationParams[j].index
|
allOperationParams.push(allOperationParam)
|
}
|
// 保存
|
that.operationParams = []
|
that.$nextTick(() => {
|
relateOperationParamTemplate(allOperationParams).then(
|
(response) => {
|
const resData = response.data
|
if (resData.code === 0) {
|
const resSteps = resData.data
|
if (resSteps.length > 0) {
|
let operationParam
|
for (let i = 0; i < resSteps.length; i++) {
|
operationParam = {}
|
operationParam.id = resSteps[i].id
|
operationParam.code = resSteps[i].code
|
operationParam.parameterItem = resSteps[i].parameterItem
|
operationParam.unit = resSteps[i].unit
|
operationParam.index = resSteps[i].index
|
operationParam.type = resSteps[i].type
|
operationParam.defaultValue = resSteps[i].defaultValue
|
operationParam.dict = resSteps[i].dict
|
operationParam.sysDictItemList =
|
resSteps[i].sysDictItemList
|
operationParam.technologyOperationTemplateId =
|
resSteps[i].technologyOperationTemplateId
|
that.operationParams.push(operationParam)
|
}
|
}
|
that.$message.success('参数关联成功')
|
} else {
|
that.message.error('参数关联失败')
|
}
|
that.newOperationParams = []
|
}
|
)
|
})
|
}
|
})
|
},
|
// 删除
|
deleteHandle(row) {
|
this.$confirm('是否确认删除模板编号为' + row.templateNo, '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
})
|
.then(function() {
|
return delObj(row.id)
|
})
|
.then((data) => {
|
this.$message.success('删除成功')
|
this.getData()
|
})
|
},
|
// 添加
|
relateOperationParam() {
|
console.log(11111);
|
if (this.templateId !== 0) {
|
// 筛选出当前页面已有的参数
|
this.paramSelArr = []
|
if (this.operationParams.length > 0) {
|
this.operationParams.forEach((ele) => {
|
if (ele.code != null && ele.code != '') {
|
this.paramSelArr.push(ele.code)
|
}
|
})
|
}
|
this.showParam = true
|
} else {
|
this.$message.error('请选择模板')
|
}
|
},
|
// 提交工序模板与工序参数的关联
|
dataFormRelateOperationParam(state) {
|
// 提交用的工序模板与工序参数关联的数组
|
if (this.operationParams.length > 0) {
|
for (let j = 0, len = this.operationParams.length; j < len; j++) {
|
this.newOperationParams.push(
|
Object.assign({
|
technologyOperationTemplateId: this.templateId,
|
technologyOperationParamId: this.operationParams[j].id,
|
sort: this.operationParams[j].index
|
})
|
)
|
}
|
relateOperationParamTemplate(this.newOperationParams).then(
|
(response) => {
|
const resData = response.data
|
if (resData.code === 0) {
|
const resSteps = resData.data
|
if (resSteps.length > 0) {
|
this.operationParams = []
|
let operationParam
|
for (let i = 0; i < resSteps.length; i++) {
|
operationParam = {
|
id: resSteps[i].id,
|
code: resSteps[i].code,
|
parameterItem: resSteps[i].parameterItem,
|
unit: resSteps[i].unit,
|
index: resSteps[i].index,
|
type: resSteps[i].type,
|
defaultValue: resSteps[i].defaultValue,
|
dict: resSteps[i].dict,
|
sysDictItemList: resSteps[i].sysDictItemList,
|
technologyOperationTemplateId:
|
resSteps[i].technologyOperationTemplateId
|
}
|
/* operationParam.id = resSteps[i].id
|
operationParam.code = resSteps[i].code
|
operationParam.parameterItem = resSteps[i].parameterItem
|
operationParam.unit = resSteps[i].unit
|
operationParam.index = resSteps[i].index
|
operationParam.type = resSteps[i].type
|
operationParam.defaultValue = resSteps[i].defaultValue */
|
this.operationParams.push(operationParam)
|
}
|
}
|
if (state) {
|
this.$message.success('参数关联成功')
|
}
|
} else {
|
this.message.error('参数关联失败')
|
}
|
this.newOperationParams = []
|
}
|
)
|
} else {
|
this.$message.error('请先选择参数')
|
}
|
},
|
// 选中的参数信息
|
getJoinData(param) {
|
const newDataList = this.operationParams
|
this.operationParams = []
|
this.$nextTick(() => {
|
this.operationParams = newDataList
|
for (let i = 0, len = param.length; i < len; i++) {
|
if (this.last) {
|
this.operationParams.push(
|
Object.assign({
|
technologyOperationTemplateId: this.templateId,
|
id: param[i].id,
|
code: param[i].code,
|
parameterItem: param[i].parameterItem,
|
type: param[i].type,
|
unit: param[i].unit,
|
defaultValue: null,
|
index: this.operationParams.length + 1
|
})
|
)
|
} else {
|
this.operationParams
|
.filter((e) => e.index >= this.templateIndex)
|
.forEach((e) => (e.index = e.index + 1))
|
this.operationParams.push(
|
Object.assign({
|
technologyOperationTemplateId: this.templateId,
|
id: param[i].id,
|
code: param[i].code,
|
parameterItem: param[i].parameterItem,
|
type: param[i].type,
|
unit: param[i].unit,
|
defaultValue: null,
|
index: this.templateIndex
|
})
|
)
|
this.last = true
|
}
|
}
|
this.dataFormRelateOperationParam(true)
|
})
|
},
|
deleteOperationParam(row) {
|
this.$confirm('是否确认删除参数编号为：' + row.code, {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then((data) => {
|
this.operationParams.splice(
|
this.operationParams.findIndex((item) => item.index === row.index),
|
1
|
)
|
this.operationParams
|
.filter((e) => e.index >= row.index)
|
.forEach((e) => (e.index = e.index - 1))
|
deleteOperationParamTemplate(
|
Object.assign({
|
technologyOperationTemplateId: this.templateId,
|
technologyOperationParamId: row.id
|
})
|
).then((response) => {
|
this.$message.success('删除关联成功')
|
})
|
if (this.operationParams.length > 0) {
|
this.dataFormRelateOperationParam(false)
|
}
|
})
|
},
|
// 获取工序参数类型
|
getParamType() {
|
remote('technology_param').then((response) => {
|
if (response.data.code === 0) {
|
this.typeOptions = response.data.data
|
} else {
|
this.typeOptions = []
|
}
|
})
|
},
|
// 表格字段格式化
|
getParam(row, column, cellValue) {
|
for (let i = 0, len = this.typeOptions.length; i < len; i++) {
|
if (cellValue == this.typeOptions[i].value) {
|
return this.typeOptions[i].label
|
}
|
}
|
},
|
// 修改保存
|
saveSample(index, row) {
|
console.log('row', row)
|
var obj = {}
|
obj.technologyOperationParamId = row.id
|
obj.technologyOperationTemplateId = row.technologyOperationTemplateId
|
obj.defaultValue = row.defaultValue
|
putRelateOperationParamTemplate(obj).then((response) => {
|
this.$message.success('参数保存成功')
|
this.$set(row, 'isUpdate', false)
|
// this.getJoinParamTemplateData()
|
})
|
},
|
editSample(index, row) {
|
this.$set(row, 'isUpdate', true)
|
},
|
getValueStr(row) {
|
let re = row.defaultValue
|
if (row.dict && row.sysDictItemList && row.sysDictItemList.length > 0) {
|
const index = row.sysDictItemList.findIndex(
|
(el) => el.value == row.defaultValue
|
)
|
if (index > -1) {
|
re = row.sysDictItemList[index].label
|
}
|
}
|
return re
|
}
|
}
|
}
|
</script>
|
<style>
|
.basic-template-table .el-table__body .el-table__row td:first-child .cell {
|
padding-left: 0px;
|
padding-right: 0px;
|
}
|
|
.basic-template-table .el-table__body .el-table__row:hover {
|
cursor: move;
|
}
|
|
.basic-template-table .el-table__body .el-table__row:hover .icon {
|
display: inline-block;
|
}
|
|
.basic-template-table .el-table__body .el-table__row .icon {
|
color: rgba(0, 0, 0, 0.45);
|
font-size: 12px;
|
line-height: 18px;
|
display: none;
|
}
|
|
.aufontAll {
|
font-family: aufontAll !important;
|
font-size: 14px;
|
font-style: normal;
|
-webkit-font-smoothing: antialiased;
|
-moz-osx-font-smoothing: grayscale;
|
}
|
|
.h-icon-all-drag {
|
background: url('/img/tz.png') center center no-repeat;
|
background-size: cover;
|
font-size: 14px;
|
}
|
.h-icon-all-drag:before {
|
content: '\E63E';
|
font-size: 14px;
|
visibility: hidden;
|
}
|
</style>
|
