<template>
|
<div>
|
<div class="body" :style="{height:mainHeight+'px'}">
|
<div class="bodyTopButtonGroup" style="justify-content: space-between">
|
<el-button v-waves type="primary" icon="el-icon-circle-plus-outline" @click="add('add')">新增</el-button>
|
<el-button
|
v-waves
|
type="success"
|
icon="el-icon-download"
|
@click="$router.push('./../systemSetting/dataImport?fileCode=15')"
|
>导入
|
</el-button>
|
</div>
|
|
<div class="bodyTopFormGroup">
|
<el-form
|
ref="form"
|
:model="form"
|
label-width="100px"
|
inline
|
style="display: flex;"
|
>
|
<div class="elForm">
|
<el-form-item label="工序编码" style=" display: flex;">
|
<el-input v-model="form.stepcode" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="工序名称" style=" display: flex;">
|
<el-input v-model="form.stepname" placeholder="请输入" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="工序类型" style=" display: flex;">
|
<el-select
|
v-model="form.steptypecode"
|
style="width:200px"
|
placeholder="请选择"
|
:popper-append-to-body="false"
|
>
|
<el-option
|
v-for="item in steptypeArr"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</el-form-item>
|
<el-form-item label="状态" style=" display: flex;">
|
<el-select
|
v-model="form.enable"
|
style="width:200px"
|
placeholder="请选择"
|
:popper-append-to-body="false"
|
>
|
<el-option
|
v-for="item in enableArr"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</el-form-item>
|
</div>
|
<div
|
class="bodySearchReset"
|
:style="{marginLeft:$store.state.app.sidebar.opened? $store.state.settings.menuIsHorizontal?'15%':'3%':'10%'}"
|
>
|
<el-button v-waves type="primary" icon="el-icon-search" @click="getStepSearch">查询</el-button>
|
<el-button v-waves type="info" icon="el-icon-refresh" @click="reset">重置</el-button>
|
</div>
|
</el-form>
|
<div
|
class="bodyTopFormExpand"
|
style="height:5px"
|
>
|
<!-- <svg-icon-->
|
<!-- v-show="mouseHoverType==='mouseout'"-->
|
<!-- style="cursor: pointer"-->
|
<!-- :icon-class="!isExpandForm?'doubleDown3':'doubleUp3'"-->
|
<!-- @mouseenter="mouseHoverType=$event.type"-->
|
<!-- />-->
|
<!-- <svg-icon-->
|
<!-- v-show="mouseHoverType==='mouseenter'"-->
|
<!-- style="cursor: pointer"-->
|
<!-- :icon-class="!isExpandForm?'doubleDown':'doubleUp'"-->
|
<!-- @click="isExpandForm=!isExpandForm"-->
|
<!-- @mouseout="mouseHoverType=$event.type"-->
|
<!-- />-->
|
</div>
|
</div>
|
|
<div class="elTableDiv">
|
<el-table
|
ref="tableDataRef"
|
class="tableFixed"
|
:data="tableData"
|
:height="tableHeight+'px'"
|
border
|
row-class-name="custom-row"
|
:style="{width: 100+'%',height:tableHeight+'px',}"
|
highlight-current-row
|
:header-cell-style="this.$headerCellStyle"
|
:cell-style="this.$cellStyle"
|
@sort-change="sortChange"
|
>
|
<el-table-column
|
prop="rowNum"
|
width="50"
|
fixed
|
label="序号"
|
/>
|
<el-table-column
|
prop="stepcode"
|
label="工序编码"
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="stepname"
|
label="工序名称"
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="flwtype"
|
label="工序类型"
|
sortable="custom"
|
>
|
<template slot-scope="{row}">
|
{{ row.flwtype === 'Z' ? '自制' : '外协' }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="enable"
|
label="状态"
|
sortable="custom"
|
>
|
<template slot-scope="{row}">
|
<el-tag v-if="row.enable==='Y'" size="small" type="success">正常</el-tag>
|
<el-tag v-if="row.enable==='N'" size="small" type="danger">停用</el-tag>
|
</template>
|
</el-table-column>
|
|
<el-table-column
|
prop="is_eqp"
|
label="关联工作站"
|
sortable="custom"
|
>
|
<template slot-scope="{row}">
|
<i
|
v-if="row.is_eqp==='Y'"
|
:style="{color:$store.state.settings.theme}"
|
class="el-icon-share"
|
@click="workClick(row)"
|
/>
|
<i
|
v-if="row.is_eqp==='N'"
|
class="el-icon-share"
|
style="color: rgb(180 ,181, 185)"
|
@click="workClick(row)"
|
/>
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="descr"
|
label="描述"
|
sortable="custom"
|
>
|
<template slot-scope="{row}">
|
{{ row.descr ? row.descr : '/' }}
|
</template>
|
</el-table-column>
|
<el-table-column
|
prop="lm_user"
|
label="创建人员"
|
sortable="custom"
|
/>
|
<el-table-column
|
prop="lm_date"
|
label="创建时间"
|
width="160"
|
sortable="custom"
|
/>
|
<el-table-column
|
label="操作"
|
width="120"
|
fixed="right"
|
>
|
<template slot-scope="{row}">
|
<div class="operationClass">
|
<el-tooltip class="item" effect="dark" content="编辑" placement="top">
|
<i
|
v-if="row.leve!==0"
|
class="el-icon-edit-outline"
|
:style="{color:$store.state.settings.theme}"
|
@click="edit('edit',row)"
|
/>
|
</el-tooltip>
|
<el-tooltip v-del-tab-index class="item" effect="dark" content="删除" placement="top">
|
<i
|
v-if="row.leve!==0"
|
class="el-icon-delete"
|
:style="{color:$store.state.settings.theme}"
|
@click="del(row)"
|
/>
|
</el-tooltip>
|
</div>
|
</template>
|
</el-table-column>
|
</el-table>
|
</div>
|
<!--分页-->
|
<pagination
|
:total="total"
|
:page.sync="form.page"
|
:limit.sync="form.rows"
|
align="right"
|
layout="total,prev, pager, next,sizes,jumper"
|
popper-class="select_bottom"
|
@pagination="getStepSearch"
|
/>
|
</div>
|
|
<!-- 新增编辑-->
|
<el-dialog
|
v-el-drag-dialog
|
:title="operation==='add'?'新增':'编辑'"
|
:visible.sync="dialogVisible"
|
width="800px"
|
:close-on-click-modal="false"
|
top="10vh"
|
@closed="handleClose"
|
@close="handleClose"
|
>
|
<el-divider content-position="left">基本信息</el-divider>
|
|
<el-form ref="dialogForm" inline :rules="dialogFormRules" :model="dialogForm" label-width="110px">
|
<el-form-item label="工序编码" prop="stepcode">
|
<el-input v-model="dialogForm.stepcode" :disabled="operation!=='add'" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="工序名称" prop="stepname">
|
<el-input v-model="dialogForm.stepname" style="width: 200px" />
|
</el-form-item>
|
<el-form-item label="工序类型" required>
|
<el-select
|
v-model="dialogForm.steptypecode"
|
style="width:200px"
|
placeholder="请选择"
|
:popper-append-to-body="false"
|
@change="steptypecodeChange"
|
>
|
|
<el-option
|
v-for="item in steptypeArr"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item v-if="dialogForm.steptypecode==='Z'" label="所属车间">
|
<el-select
|
v-model="dialogForm.Wkshop"
|
style="width:200px"
|
placeholder="请选择"
|
multiple
|
collapse-tags
|
:popper-append-to-body="false"
|
@change="WkshopChange"
|
>
|
<el-option
|
v-for="item in WkshopArr"
|
:key="item.torg_code"
|
:label="item.torg_name"
|
:value="item.torg_code"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item v-if="dialogForm.steptypecode==='W'" label="往来单位类型">
|
<el-select
|
v-model="dialogForm.CustomerType"
|
style="width:200px"
|
placeholder="请选择"
|
multiple
|
collapse-tags
|
:popper-append-to-body="false"
|
@change="CustomerTypeChange"
|
>
|
<el-option
|
v-for="item in CustomerTypeArr"
|
:key="item.code"
|
:label="item.name"
|
:value="item.code"
|
/>
|
</el-select>
|
</el-form-item>
|
|
<el-form-item required label="工序状态">
|
<el-radio-group v-model="dialogForm.enable" style="width:200px">
|
<el-radio label="Y">正常</el-radio>
|
<el-radio label="N">停用</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="工序描述">
|
<el-input
|
v-model="dialogForm.description"
|
type="textarea"
|
style="width: 200px"
|
/>
|
</el-form-item>
|
</el-form>
|
|
<el-divider content-position="left">工作站</el-divider>
|
<el-tree
|
ref="dialogTree"
|
:data="dialogTreeArr"
|
show-checkbox
|
node-key="code"
|
style="height: 280px;overflow: auto"
|
default-expand-all
|
:props="workTreeDefaultProps"
|
/>
|
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button v-waves @click="dialogVisibleCancel">取 消</el-button>
|
<el-button
|
v-waves
|
type="primary"
|
:loading="$store.state.app.buttonIsDisabled"
|
:disabled="$store.state.app.buttonIsDisabled"
|
@click="dialogVisibleConfirm"
|
>确 定</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
|
<!-- 关联工作站对话框-->
|
<el-dialog
|
v-el-drag-dialog
|
title="关联工作站"
|
:visible.sync="workDialogVisible"
|
width="50%"
|
top="15vh"
|
:close-on-click-modal="false"
|
class="workDialogVisible"
|
@closed="workHandleClose"
|
@close="workHandleClose"
|
>
|
<!-- @opened="handleOpenedRoles"-->
|
|
<div>
|
<i class="el-icon-s-comment" :style="{color:$store.state.settings.theme}" /> 工序名称：{{ workDialogForm.stepname }}
|
</div>
|
<el-divider />
|
<div>
|
<div style="margin-bottom:20px">
|
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 工作站集合：
|
</div>
|
<div class="myCheckboxGroup">
|
<div
|
v-for="item in workDialogForm.workGatherArr"
|
:key="item.code"
|
:style="{border:item.isSelected1?'1px solid '+$store.state.settings.theme :'1px solid #eee'}"
|
class="myCheckbox"
|
@click="myCheckboxClick(item)"
|
>
|
<!-- <input-->
|
<!-- class="myCheckboxInput"-->
|
<!-- type="checkbox"-->
|
<!-- :value="item.code"-->
|
<!-- name="gather"-->
|
<!-- :style="{color:item.isSelected2?'#42b983':'#fff'}"-->
|
<!-- @click="myCheckboxInputClick(item)"-->
|
<!-- >{{ item.name }}-->
|
<!-- 父子点击事件不影响-->
|
<!-- onClick="event.cancelBubble = true"-->
|
<el-checkbox
|
:key="item.code"
|
v-model="item.isSelected2"
|
class="myCheckboxInput"
|
:value="item.code"
|
:name="item.name"
|
:label="item.name"
|
:checked="item.isSelected2"
|
@change="myCheckboxInputClick(item)"
|
/>
|
<div class="myCheckboxInputLabel">{{ item.name }}</div>
|
|
</div>
|
</div>
|
</div>
|
<el-divider />
|
<div>
|
<div style="margin-bottom:20px">
|
<i class="el-icon-s-operation" :style="{color:$store.state.settings.theme}" /> 工作站：
|
</div>
|
<el-tree
|
ref="workTree"
|
:data="workDialogForm.workTreeArr"
|
show-checkbox
|
node-key="code"
|
style="height: 280px;overflow: auto"
|
default-expand-all
|
:props="workTreeDefaultProps"
|
@check="checkBoxClick"
|
/>
|
<!-- @check-change="checkChange"-->
|
|
</div>
|
<span slot="footer" class="dialog-footer">
|
<div class="footerButton">
|
<el-button v-waves @click="workDialogVisibleCancel">取 消</el-button>
|
<el-button
|
v-waves
|
type="primary"
|
:loading="$store.state.app.buttonIsDisabled"
|
:disabled="$store.state.app.buttonIsDisabled"
|
@click="workDialogVisibleConfirm"
|
>确 定</el-button>
|
</div>
|
</span>
|
</el-dialog>
|
|
</div>
|
</template>
|
|
<script>
|
import Pagination from '@/components/Pagination'
|
import { AddUpdateStep, DeleteStep, SaveStepAssociationEqp, StepAssociationEqp, StepSearch } from '@/api/basicSettings'
|
import { validateCode } from '@/utils/global'
|
import elDragDialog from '@/directive/el-drag-dialog'
|
import waves from '@/directive/waves'
|
import $ from 'jquery'
|
import {
|
CustomerPermissions,
|
CustomerTypePermissions,
|
CustomerTypeSearchPermission,
|
TorgWkshop,
|
WkshopEqpPermissions
|
} from '@/api/GeneralBasicData'
|
|
export default {
|
name: 'Zzjg',
|
components: {
|
Pagination
|
},
|
directives: { elDragDialog, waves },
|
data() {
|
return {
|
mainHeight: 0,
|
tableHeight: 0,
|
form: {
|
stepcode: '', //
|
stepname: '', //
|
enable: '', //
|
steptypecode: '', // 工序类型
|
prop: 'lm_date', // 排序字段
|
order: 'desc', // 排序字段
|
page: 1, // 第几页
|
rows: 20 // 每页多少条
|
},
|
total: 10,
|
tableData: [],
|
steptypeArr: [
|
{ code: 'Z', name: '自制' },
|
{ code: 'W', name: '外协' }
|
],
|
enableArr: [
|
{ code: 'Y', name: '正常' },
|
{ code: 'N', name: '停用' }
|
],
|
WkshopArr: [], // 车间下拉数组
|
CustomerTypeArr: [], // 往来单位下拉数组
|
dialogVisible: false,
|
dialogForm: {
|
id: '',
|
stepcode: '', //
|
stepname: '', //
|
Wkshop: '', //
|
CustomerType: '', //
|
steptypecode: 'Z',
|
description: '', // 描述
|
enable: 'Y'// 状态
|
},
|
dialogTreeArr: [],
|
operation: '',
|
dialogFormRules: {
|
stepcode: [
|
{ required: true, validator: validateCode, trigger: ['blur', 'change'] }
|
],
|
stepname: [
|
{ required: true, message: '请输入工序名称', trigger: ['blur', 'change'] }
|
]
|
},
|
workDialogVisible: false,
|
workDialogForm: {
|
stepcode: '', // 工序编码
|
stepname: '', // 工序名称
|
workArr: [], // 工作站所有数组
|
workGatherArr: [], // 工作站集合数组
|
workCodeSelectedGatherArr: [], // 工作站选中集合的code数组
|
workTreeArr: [], // 工作站树数组
|
workTreeSelectedArr: []// 工作站树选中的数组code集合
|
},
|
workTreeDefaultProps: {
|
value: 'code',
|
label: 'name',
|
children: 'children'
|
},
|
|
dialogTreeSelectedArr: []// 对话框树形选中回显值
|
|
}
|
},
|
created() {
|
this.getStepSearch()
|
this.getTorgWkshop()
|
this.getCustomerTypePermissions()
|
},
|
mounted() {
|
window.addEventListener('resize', this.getHeight)
|
this.getHeight()
|
},
|
methods: {
|
// 组织架构大列表查询
|
async getStepSearch() {
|
const res = await StepSearch(this.form)
|
this.tableData = res.data
|
this.total = res.count
|
},
|
// 查询公司的车间
|
async getTorgWkshop() {
|
const { data: res } = await TorgWkshop()
|
this.WkshopArr = res
|
},
|
// 往来单位类型
|
async getCustomerTypePermissions() {
|
const { data: res } = await CustomerTypePermissions()
|
this.CustomerTypeArr = res
|
},
|
// 查看往来资料
|
async getCustomerPermissions() {
|
const { data: res } = await CustomerPermissions()
|
this.dialogTreeArr = [
|
{ code: '',
|
name: '全部',
|
children: res
|
}
|
]
|
},
|
|
async steptypecodeChange(val) {
|
// if (val === 'W') { // 外协
|
// this.dialogForm.CustomerType = []
|
// // await this.getCustomerPermissions()
|
// } else { // 自制
|
// this.dialogForm.Wkshop = []
|
// }
|
this.dialogForm.CustomerType = []
|
this.dialogForm.Wkshop = []
|
this.dialogTreeArr = []
|
},
|
|
// 车间值改变时触发
|
async WkshopChange(val) {
|
if (val.length === 0) {
|
this.dialogTreeArr = []
|
return
|
}
|
const { data: res } = await WkshopEqpPermissions({ wkshopcode: val.join(',') })
|
this.dialogTreeArr = [
|
{ code: '',
|
name: '全部',
|
children: res
|
}
|
]
|
},
|
|
// 往来单位类型值改变时
|
async CustomerTypeChange(val) {
|
if (val.length === 0) {
|
this.dialogTreeArr = []
|
return
|
}
|
const { data: res } = await CustomerTypeSearchPermission({ customertypecode: val.join(',') })
|
this.dialogTreeArr = [
|
{ code: '',
|
name: '全部',
|
children: res
|
}
|
]
|
},
|
|
// 排序改变时
|
sortChange({ column, prop, order }) {
|
if (order === 'descending') {
|
order = 'desc'
|
} else if (order === 'ascending') {
|
order = 'asc'
|
} else {
|
order = 'desc'
|
}
|
this.form.order = order
|
this.form.prop = prop
|
this.getStepSearch()
|
},
|
// 重置
|
reset() {
|
this.form.stepcode = ''
|
this.form.stepname = ''
|
this.form.enable = ''
|
this.form.steptypecode = ''
|
this.getStepSearch()
|
},
|
// 新增按钮
|
add(operation) {
|
this.operation = operation
|
this.dialogVisible = true
|
this.dialogForm.OperType = 'Add'
|
},
|
// 修改按钮
|
async edit(operation, row) {
|
this.operation = operation
|
this.dialogVisible = true
|
this.dialogForm.OperType = 'Update'
|
|
const { data: res } = await StepAssociationEqp({ stepcode: row.stepcode })
|
// row.flwtype //Z：自制 W：外协
|
if (row.flwtype === 'Z') {
|
this.dialogForm.Wkshop = []
|
res.filter(i => i.type === 'E' && i.flag === 'Y').forEach(i => {
|
this.dialogForm.Wkshop.push(i.code)
|
i.children.forEach(j => {
|
if (j.flag === 'Y') {
|
this.dialogTreeSelectedArr.push(j.code)
|
}
|
})
|
})
|
await this.WkshopChange(this.dialogForm.Wkshop)
|
} else if (row.flwtype === 'W') {
|
this.dialogForm.CustomerType = []
|
// await this.steptypecodeChange(row.flwtype)
|
res.filter(i => i.type === 'W' && i.flag === 'Y').forEach(i => {
|
this.dialogForm.CustomerType.push(i.code)
|
i.children.forEach(j => {
|
if (j.flag === 'Y') {
|
this.dialogTreeSelectedArr.push(j.code)
|
}
|
})
|
})
|
await this.CustomerTypeChange(this.dialogForm.CustomerType)
|
}
|
|
this.$nextTick(() => {
|
this.dialogForm.id = row.id
|
this.dialogForm.stepcode = row.stepcode
|
this.dialogForm.stepname = row.stepname
|
this.dialogForm.description = row.descr
|
this.dialogForm.enable = row.enable
|
this.dialogForm.steptypecode = row.flwtype
|
|
this.$refs.dialogTree.setCheckedKeys(this.dialogTreeSelectedArr)
|
})
|
},
|
// 删除按钮
|
async del(row) {
|
this.$confirm('是否确认删除?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(() => {
|
DeleteStep({ stepcode: row.stepcode }).then(res => {
|
if (res.code === '200') {
|
this.$notify.success('删除成功!')
|
if (this.form.page > 1 && this.tableData.length === 1) {
|
this.form.page--
|
}
|
this.getStepSearch()
|
}
|
})
|
}).catch(() => {
|
this.$notify.info('已取消删除')
|
})
|
},
|
// 对话框关闭事件
|
handleClose() {
|
this.dialogForm.stepcode = ''
|
this.dialogForm.stepname = ''
|
this.dialogForm.id = ''
|
this.dialogForm.enable = 'Y'
|
this.dialogForm.description = ''
|
this.dialogForm.steptypecode = 'Z'
|
this.dialogTreeArr = []
|
this.dialogForm.Wkshop = []
|
this.dialogForm.CustomerType = []
|
this.dialogTreeSelectedArr = []
|
this.$refs.dialogForm.clearValidate()
|
},
|
// 对话框取消
|
dialogVisibleCancel() {
|
this.dialogVisible = false
|
},
|
// 对话框确认
|
dialogVisibleConfirm() {
|
this.$refs.dialogForm.validate(valid => {
|
if (valid) {
|
// console.log(JSON.parse(JSON.stringify(this.dialogForm)))
|
|
const children = []
|
this.$refs.dialogTree.getCheckedKeys().filter(i => i.length > 0).forEach(i => {
|
children.push({
|
stepcode: this.dialogForm.stepcode,
|
eqpcode: i,
|
style: this.dialogForm.steptypecode
|
})
|
})
|
|
const data = {
|
'id': this.dialogForm.id,
|
'stepcode': this.dialogForm.stepcode,
|
'stepname': this.dialogForm.stepname,
|
'steptypecode': this.dialogForm.steptypecode,
|
'enable': this.dialogForm.enable,
|
'description': this.dialogForm.description,
|
children
|
}
|
|
this.$store.state.app.buttonIsDisabled = true
|
AddUpdateStep(data, this.operation === 'add' ? 'Add' : 'Update').then(res => {
|
if (res.code === '200') {
|
this.$notify.success(this.operation === 'add' ? '添加成功！' : '修改成功！')
|
this.dialogVisible = false
|
this.$store.state.app.buttonIsDisabled = false
|
this.getStepSearch()
|
} else {
|
this.$store.state.app.buttonIsDisabled = false
|
this.$notify.error(this.operation === 'add' ? '添加失败！' : '修改失败！')
|
}
|
})
|
}
|
})
|
},
|
// 获取页面高度
|
getHeight() {
|
this.$nextTick(() => {
|
this.mainHeight = window.innerHeight - 85
|
this.tableHeight = this.mainHeight - 200
|
this.$refs.tableDataRef.doLayout()
|
})
|
},
|
/* 关联工作站模块*/
|
// 关联工作站点击
|
workClick(row) {
|
const loading = this.$loading({
|
lock: true,
|
text: '正在加载数据，请稍等...',
|
spinner: 'el-icon-loading',
|
customClass: 'osloading',
|
background: 'rgba(0, 0, 0, 0.7)'
|
})
|
|
this.workDialogForm.stepcode = row.stepcode
|
this.workDialogForm.stepname = row.stepname
|
StepAssociationEqp({ stepcode: this.workDialogForm.stepcode }).then(res => {
|
if (res.code === '200') {
|
setTimeout(() => {
|
loading.close()
|
this.workDialogVisible = true
|
|
this.workDialogForm.workArr = res.data.filter(item => item.children.length !== 0)
|
|
let workGatherArr = []
|
if (row.flwtype === 'W') { // 外协情况下
|
workGatherArr = this.workDialogForm.workArr.filter(item => item.type === 'W')
|
} else if (row.flwtype === 'Z') { // 自制情况下
|
workGatherArr = this.workDialogForm.workArr.filter(item => item.type === 'E')
|
} else { // 自制＋外协
|
workGatherArr = this.workDialogForm.workArr
|
}
|
const nodeKey = []// 需要树形数显的值
|
workGatherArr.forEach((item, index) => {
|
this.workDialogForm.workGatherArr.push({
|
isSelected1: index === 0,
|
isSelected2: item.flag === 'Y',
|
code: item.code,
|
name: item.name,
|
type: item.type,
|
flag: item.flag
|
})
|
if (item.flag === 'Y' && item.children && item.children.length > 0) {
|
this.$nextTick(() => {
|
$("input[name='gather']").eq(index).prop('checked', true)// 自定义单选框回显
|
})
|
item.children.forEach(it => {
|
if (it.flag === 'Y') {
|
nodeKey.push(it.code)
|
}
|
})
|
}
|
if (index === 0) {
|
if (item.children && item.children.length > 0) {
|
this.workDialogForm.workTreeArr = this.workDialogForm.workArr.filter(it => it.code === item.code)
|
this.workDialogForm.workTreeArr[0].name = '全部'
|
}
|
}
|
// item.flag === 'Y'&&item
|
})
|
|
this.$nextTick(() => {
|
this.$refs.workTree.setCheckedKeys(nodeKey)
|
})
|
this.workDialogForm.workTreeSelectedArr = nodeKey
|
}, 1000)
|
} else {
|
loading.close()
|
}
|
})
|
},
|
// 大盒子点击事件
|
myCheckboxClick(val) {
|
console.log(val.code, 3)
|
// 点击不同的盒子进行选中样式切换
|
this.workDialogForm.workGatherArr.find(item => {
|
item.isSelected1 = item.code === val.code
|
})
|
this.workDialogForm.workTreeArr = this.workDialogForm.workArr.filter(item => item.code === val.code)
|
if (this.workDialogForm.workTreeArr[0].children && this.workDialogForm.workTreeArr[0].children.length > 0) {
|
this.workDialogForm.workTreeArr[0].name = '全部'
|
} else {
|
this.workDialogForm.workTreeArr = []
|
}
|
|
console.log(this.workDialogForm.workTreeArr, 8)
|
},
|
// 小盒子点击事件
|
myCheckboxInputClick(val) {
|
val.isSelected2 = !!val.isSelected2
|
console.log(val.code, 1)
|
this.workDialogForm.workCodeSelectedGatherArr = [...new Set(this.workDialogForm.workCodeSelectedGatherArr)]
|
// 1.第一种情况 小盒子从没选中到选中
|
if (val.isSelected2) {
|
console.log('1.第一种情况 小盒子从没选中到选中')
|
this.workDialogForm.workCodeSelectedGatherArr.push(val.code)
|
|
this.workDialogForm.workArr.forEach((item, index) => {
|
if (item.code === val.code) {
|
item.flag = 'Y'
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(it => {
|
it.flag = 'Y'
|
this.workDialogForm.workTreeSelectedArr.push(it.code)
|
})
|
}
|
}
|
})
|
}
|
|
// 2.第二种情况 小盒子从选中到没选中
|
if (!val.isSelected2) {
|
console.log('2.第二种情况 小盒子从选中到没选中')
|
this.workDialogForm.workCodeSelectedGatherArr = this.workDialogForm.workCodeSelectedGatherArr.filter(item => item !== val.code)
|
this.workDialogForm.workArr.forEach((item, index) => {
|
if (item.code === val.code) {
|
item.flag = 'N'
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(it => {
|
it.flag = 'N'
|
this.workDialogForm.workTreeSelectedArr.forEach((i, ind) => {
|
if (i === it.code) {
|
this.workDialogForm.workTreeSelectedArr.splice(ind, 1)
|
}
|
})
|
})
|
}
|
}
|
})
|
}
|
this.workDialogForm.workCodeSelectedGatherArr = [...new Set(this.workDialogForm.workCodeSelectedGatherArr)]
|
|
console.log(this.workDialogForm.workCodeSelectedGatherArr, 2)
|
console.log(this.workDialogForm.workTreeSelectedArr, 23)
|
// this.$refs.workTree.setCheckedKeys(this.workDialogForm.workCodeSelectedGatherArr)
|
this.$refs.workTree.setCheckedKeys(this.workDialogForm.workTreeSelectedArr)
|
},
|
// 树形中 框选中
|
checkBoxClick(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys }) {
|
console.log(obj, { checkedNodes, checkedKeys, halfCheckedNodes, halfCheckedKeys })
|
|
let checkedFatherCode = '' // 找到 checkedFatherCode 父code值
|
this.workDialogForm.workArr.forEach((item, index) => {
|
if (item.code === obj.code) {
|
checkedFatherCode = item.code
|
}
|
if (item.children && item.children.length > 0) {
|
item.children.forEach((it, ind) => {
|
if (it.code === obj.code) {
|
checkedFatherCode = item.code
|
}
|
})
|
}
|
})
|
|
// 1.第一种情况 半叶为零 全叶为零
|
if (checkedKeys.length === 0 && halfCheckedKeys.length === 0) {
|
console.log('1.第一种情况 半叶为零 全叶为零')
|
console.log(obj.code, 10)
|
// this.workDialogForm.workCodeSelectedGatherArr = this.workDialogForm.workCodeSelectedGatherArr.filter(item => item !== obj.code)
|
|
this.workDialogForm.workGatherArr.forEach((item, index) => {
|
if (item.code === checkedFatherCode) {
|
this.workDialogForm.workGatherArr[index].isSelected2 = false
|
|
// item.isSelected1 = item.code === checkedFatherCode
|
this.workDialogForm.workCodeSelectedGatherArr = this.workDialogForm.workCodeSelectedGatherArr.filter(it => it !== checkedFatherCode)
|
this.$nextTick(() => {
|
// console.log($("input[name='gather']"))
|
$("input[name='gather']").eq(index).prop('checked', false)// 自定义单选框回显
|
})
|
}
|
})
|
|
this.workDialogForm.workArr.forEach((item, index) => {
|
if (item.code === checkedFatherCode) {
|
item.flag = 'N'
|
if (item.children && item.children.length > 0) {
|
item.children.forEach((it) => {
|
it.flag = 'N'
|
this.workDialogForm.workTreeSelectedArr.forEach((i, ind) => {
|
if (i === it.code) {
|
this.workDialogForm.workTreeSelectedArr.splice(ind, 1)
|
}
|
})
|
})
|
}
|
}
|
})
|
console.log(this.workDialogForm.workCodeSelectedGatherArr, 11)
|
console.log(this.workDialogForm.workTreeSelectedArr, 18)
|
}
|
|
// 2.第二种情况 半叶不为零 全叶不为零
|
if (checkedKeys.length !== 0 && halfCheckedKeys.length !== 0) {
|
console.log('2.第二种情况 半叶不为零 全叶不为零')
|
console.log(obj.code, 13)
|
// console.log(this.$refs.workTree, 22)
|
|
this.workDialogForm.workGatherArr.forEach((item, index) => {
|
if (item.code === checkedFatherCode) {
|
this.workDialogForm.workGatherArr[index].isSelected2 = true
|
// this.workDialogForm.workCodeSelectedGatherArr.push(obj.code)
|
this.$nextTick(() => {
|
$("input[name='gather']").eq(index).prop('checked', true)// 自定义单选框回显
|
})
|
}
|
})
|
|
this.workDialogForm.workArr.forEach((item, index) => {
|
if (item.code === checkedFatherCode) {
|
item.flag = 'Y'
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(it => {
|
if (it.code === obj.code) {
|
console.log(it.code, 21)
|
if (it.flag === 'Y' && it.code === obj.code) {
|
it.flag = 'N'
|
this.workDialogForm.workTreeSelectedArr.forEach((i, ind) => {
|
if (i === it.code) {
|
console.log(i, 333)
|
this.workDialogForm.workTreeSelectedArr.splice(ind, 1)
|
}
|
})
|
} else if (it.flag === 'N' && it.code === obj.code) {
|
it.flag = 'Y'
|
console.log(2222)
|
this.workDialogForm.workTreeSelectedArr.push(it.code)
|
}
|
}
|
})
|
}
|
|
console.log(this.workDialogForm.workTreeSelectedArr, 17)
|
|
// this.$nextTick(() => {
|
// $("input[name='gather']").eq(index).prop('checked', true)// 自定义单选框回显
|
// })
|
}
|
})
|
}
|
|
// 3.第三种情况 半叶为零 全叶不为零
|
if (checkedKeys.length !== 0 && halfCheckedKeys.length === 0) {
|
console.log('3.第三种情况 半叶为零 全叶不为零')
|
console.log(obj.code, 12)
|
this.workDialogForm.workGatherArr.forEach((item, index) => {
|
if (item.code === checkedFatherCode) {
|
this.workDialogForm.workGatherArr[index].isSelected2 = true
|
this.workDialogForm.workCodeSelectedGatherArr.push(obj.code)
|
this.$nextTick(() => {
|
$("input[name='gather']").eq(index).prop('checked', true)// 自定义单选框回显
|
})
|
}
|
})
|
|
this.workDialogForm.workArr.forEach((item, index) => {
|
if (item.code === checkedFatherCode) {
|
item.flag = 'Y'
|
if (item.children && item.children.length > 0) {
|
item.children.forEach(it => {
|
it.flag = 'Y'
|
this.workDialogForm.workTreeSelectedArr.push(it.code)
|
})
|
}
|
}
|
})
|
}
|
this.workDialogForm.workTreeSelectedArr = [...new Set(this.workDialogForm.workTreeSelectedArr)]
|
|
this.$refs.workTree.setCheckedKeys(this.workDialogForm.workTreeSelectedArr)
|
console.log(this.workDialogForm.workTreeSelectedArr, 14)
|
console.log(this.workDialogForm.workArr, 15)
|
},
|
// 对话框关闭事件
|
workHandleClose() {
|
this.workDialogForm.workArr = []
|
this.workDialogForm.workGatherArr = []
|
this.workDialogForm.workTreeArr = []
|
this.$refs.workTree.setCheckedKeys([])
|
},
|
// 取消
|
workDialogVisibleCancel() {
|
this.workDialogVisible = false
|
},
|
// 确认
|
async workDialogVisibleConfirm() {
|
this.workDialogForm.workTreeSelectedArr = [...new Set(this.workDialogForm.workTreeSelectedArr)]
|
|
const data = []
|
this.workDialogForm.workArr.forEach(item => {
|
if (item.flag === 'Y' && item.children && item.children.length > 0) {
|
item.children.forEach(it => { // 保存接口只传最子项 name传的是type
|
if (it.flag === 'Y') {
|
data.push({ code: it.code, name: it.type })
|
}
|
})
|
}
|
})
|
this.$store.state.app.buttonIsDisabled = true
|
console.log(this.workDialogForm.stepcode, 123)
|
const res = await SaveStepAssociationEqp(this.workDialogForm.stepcode, data)
|
if (res.code === '200') {
|
this.workDialogVisible = false
|
this.$message.success('保存成功！')
|
await this.getStepSearch()
|
this.$store.state.app.buttonIsDisabled = false
|
}
|
}
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
$main_color: #42b983;
|
.el-icon-share{
|
color: $main_color;
|
cursor: pointer;
|
}
|
.workDialogVisible {
|
.myCheckboxGroup {
|
display: flex;
|
flex-wrap: wrap;
|
|
.myCheckbox {
|
border: 1px solid #eee;
|
display: flex;
|
min-width: 100px;
|
padding: 10px;
|
margin: 10px 30px 0 0;
|
border-radius: 5px;
|
cursor: default;
|
position: relative;
|
|
.myCheckboxInput {
|
margin: 1px 5px 0 0;
|
cursor: pointer;
|
}
|
|
.myCheckboxInputLabel {
|
position: absolute;
|
left: 29px;
|
padding: 5px;
|
top: 6px;
|
color: transparent;
|
}
|
|
}
|
|
input[type=checkbox] {
|
cursor: pointer;
|
position: relative;
|
width: 14px;
|
height: 14px;
|
font-size: 14px;
|
}
|
|
input[type=checkbox]::after {
|
position: absolute;
|
top: 0;
|
color: $main_color;
|
width: 14px;
|
height: 14px;
|
display: inline-block;
|
visibility: visible;
|
padding-left: 0;
|
text-align: center;
|
content: ' ';
|
border-radius: 3px
|
}
|
|
input[type=checkbox]:checked::after {
|
content: "✓";
|
//content: "√";
|
color: #fff;
|
font-size: 12px;
|
font-weight: bold;
|
background-color: $main_color;
|
}
|
}
|
}
|
|
</style>
|
