123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631 |
- <template>
- <div class="production">
- <el-dialog title="排产模板详情"
- width="70%"
- :close-on-click-modal="false"
- :visible.sync="visible">
- <el-form :model="dataForm" :rules="dataRule" ref="dataForm" label-width="auto">
- <el-row class="my-row">
- <el-col :span="8">
- <el-form-item label="产品" prop="productId">
- <el-select
- v-model="dataForm.productId"
- :disabled="display"
- @change="productChange"
- remote
- placeholder="请选择">
- <el-option
- v-for="item in productList"
- :key="item.productId"
- :label="item.productName"
- :value="item.productId">
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="12">
- <el-form-item label="模板名称" prop="mouldName">
- <el-input placeholder="请输入模板名称" v-model="dataForm.mouldName" maxlength="30" show-word-limit></el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row class="my-row" style="height: 350px; background-color: #efefef;">
- <super-flow
- v-if="visible"
- ref="superFlow"
- :node-list="nodeList"
- :link-list="linkList"
- :graph-menu="graphMenuList"
- :node-menu="nodeMenuList"
- :link-menu="linkMenuList"
- :link-desc="linkDesc">
- </super-flow>
- </el-row>
- </el-form>
- <span slot="footer" class="dialog-footer">
- <el-button @click="visible = false">取消</el-button>
- <el-button type="primary" @click="dataFormSubmit()">确认提交</el-button>
- </span>
- </el-dialog>
- <el-dialog
- :title="drawerConf.title"
- :visible.sync="drawerConf.visible"
- :close-on-click-modal="false"
- width="500px">
- <el-form
- @keyup.native.enter="settingSubmit"
- @submit.native.prevent
- v-show="drawerConf.type === drawerType.node"
- ref="nodeSetting"
- :rules="dataRule1"
- :model="nodeSetting">
- <el-row class="my-row">
- <el-col :span="24">
- <el-form-item
- label="节点名称"
- prop="name">
- <el-input
- v-model="nodeSetting.name"
- placeholder="请输入节点名称"
- maxlength="30"
- disabled>
- </el-input>
- </el-form-item>
- </el-col>
- </el-row>
- <el-row class="my-row" >
- <el-col :span="24" v-if="drawerConf.prop !== 'end'">
- <el-form-item
- label="操作人员"
- prop="operatorIds">
- <el-select
- v-model="nodeSetting.operatorIds"
- multiple
- style="width:100%"
- placeholder="请选择">
- <el-option
- v-for="item in operatorList"
- :key="item.userId"
- :label="item.name"
- :value="item.userId">
- </el-option>
- </el-select>
- </el-form-item>
- </el-col>
- </el-row>
- </el-form>
- <span
- slot="footer"
- class="dialog-footer">
- <el-button
- @click="drawerConf.cancel">
- 取 消
- </el-button>
- <el-button
- type="primary"
- @click="settingSubmit">
- 确 定
- </el-button>
- </span>
- </el-dialog>
- </div>
- </template>
- <script>
- import { getStepId } from '@/api/crafts'
- import { getMouldDetail, getProductList, getMouldDetailByProductId, saveProdProductionMould, updateProdProductionMould } from '@/api/production'
- import { workTypeMasterList } from '@/api/worktype'
- import { uuid } from '../common/vue-super-flow/utils'
- const drawerType = {
- node: 0,
- link: 1
- }
- export default {
- name: 'scheduling-details',
- data () {
- return {
- mouldId: '',
- visible: false,
- dataForm: {
- mouldName: ''
- },
- drawerType,
- operatorList: [],
- operatorIds: [],
- productList: [],
- display: false,
- drawerConf: {
- title: '',
- visible: false,
- prop: '',
- type: null,
- info: null,
- open: (type, info) => {
- if (info.meta.workTypeId && info.meta.prop !== 'end') {
- this.getOperatorList(info.meta.workTypeId);
- }
-
- const conf = this.drawerConf
- conf.visible = true
- conf.type = type
- conf.info = info
- if (conf.type === drawerType.node) {
- conf.title = '节点'
- conf.prop = info.meta.prop
- if (this.$refs.nodeSetting) this.$refs.nodeSetting.resetFields()
- this.$set(this.nodeSetting, 'name', info.meta.name)
- this.$set(this.nodeSetting, 'desc', info.meta.desc)
- // this.$set(this.nodeSetting, 'prop', info.meta.prop)
- this.$set(this.nodeSetting, 'type', info.meta.type)
- this.$set(this.nodeSetting, 'workTypeId', info.meta.workTypeId)
- this.$set(this.nodeSetting, 'operatorIds', info.meta.operatorIds)
-
- } else {
- conf.title = '连线'
- if (this.$refs.linkSetting) this.$refs.linkSetting.resetFields()
- // this.$set(this.linkSetting, 'desc', info.meta ? info.meta.desc : '')
- }
- },
- cancel: () => {
- this.drawerConf.visible = false
- if (this.drawerConf.type === drawerType.node) {
- this.$refs.nodeSetting.clearValidate()
- } else {
- this.$refs.linkSetting.clearValidate()
- }
- }
- },
- linkSetting: {
- desc: ''
- },
- nodeSetting: {
- name: '',
- desc: '',
- type: 1,
- workTypeId: ''
- },
- nodeList: [],
- linkList: [],
- graphMenuList: [
- [
- {
- label: '开始节点',
- disable: true,
- selected: async (graph, coordinate) => {
- const start = graph.nodeList.find(node => node.meta.prop === 'start')
- let id = ''
- await getStepId().then(({ data }) => {
- id = data.data.stepId
- })
- if (!start) {
- graph.addNode({
- width: 90,
- height: 50,
- coordinate: coordinate,
- id: id,
- meta: {
- prop: 'start',
- name: '开始节点'
- }
- })
- }
- }
- },
- {
- label: '节点',
- disable: true,
- selected: async (graph, coordinate) => {
- let id = ''
- await getStepId().then(({ data }) => {
- id = data.data.stepId
- })
- graph.addNode({
- width: 120,
- height: 70,
- coordinate: coordinate,
- id: id,
- meta: {
- prop: 'condition',
- name: '节点名称'
- }
- })
- }
- },
- {
- label: '结束节点',
- disable: true,
- selected: async (graph, coordinate) => {
- let id = ''
- await getStepId().then(({ data }) => {
- id = data.data.stepId
- })
- graph.addNode({
- width: 90,
- height: 50,
- coordinate: coordinate,
- id: id,
- meta: {
- prop: 'end',
- name: '结束节点'
- }
- })
- }
- }
- ],
- [
- {
- label: '完成',
- selected: (graph, coordinate) => {
- graph.selectAll()
- this.datas = graph
- console.log(graph)
- }
- }
- ]
- ],
- nodeMenuList: [
- [
- {
- label: '删除',
- disable: true,
- hidden (node) {
- return node.meta.prop === 'start'
- },
- selected (node, coordinate) {
- node.remove()
- }
- }
- ],
- [
- {
- label: '编辑',
- selected: (node, coordinate) => {
- this.drawerConf.open(drawerType.node, node)
- }
- }
- ]
- ],
- linkMenuList: [
- [
- {
- label: '删除',
- selected: (link, coordinate) => {
- link.remove()
- }
- }
- ]
- ],
- datas: {},
- dataRule: {
- mouldName: [{required: true, message: '请输入模板名称', trigger: 'blur'}]
- },
- dataRule1: {
- operatorIds: [{ required: true, message: '操作人员不能为空', trigger: 'change' }]
- }
- }
- },
- methods: {
- // 初始化产品名称列表
- async initProductList() {
- getProductList().then(({data}) => {
- if(data && data.code === '200') {
- data.data.forEach(item => {
- this.productList.push(item)
- })
- }
- })
- },
- // 初始化表单
- async init (id, disable) {
- this.visible = true
- this.display = disable
- this.nodeList = []
- this.linkList = []
- this.mouldId = id;
- if(!disable){
- await this.initProductList();
- }
- await getMouldDetail(id).then(async ({data}) => {
- if (data && data.code === '200') {
- this.dataForm = data.data
-
- // 图纸
- if (this.dataForm.proTechnologyStepList) {
- const dataline = []
- const datanode = []
- await this.dataForm.proTechnologyStepList.forEach((v, i) => {
- // eslint-disable-next-line no-unused-vars
- const sortNo = []
- const datas = v.sort((a, b) => Number(a['sortNo']) - Number(b['sortNo']))
- let length = datas.length
- datas.forEach((item, index) => {
- const find = datanode.find(map => map.id === item.stepId)
- if (!find) {
- datanode.push({
- id: item.stepId,
- width: (index === 0 || item.workTypeId === '0') ? 90 : 120,
- height: (index === 0 || item.workTypeId === '0') ? 50 : 70,
- coordinate: item.coordinate.split(','),
- meta: {
- name: item.stepName,
- desc: item.operatorName,
- prop: index === 0 ? 'start' : (index === length - 1) ? 'end' : 'condition',
- notes: item.notes || '',
- workTypeId: item.workTypeId || '',
- type: item.type || '',
- operatorIds: item.operatorId.split(',')
- }
- })
- }
- const id = item.stepId
- if ((index + 1) < datas.length) {
- if (datas[index + 1]) {
- dataline.push({
- id: uuid('link'),
- startId: id,
- endId: datas[index + 1].stepId,
- meta: '',
- startAt: [(index === 0 || item.workTypeId === '0') ? 90 : 120, (index === 0 || item.workTypeId === '0') ? 25 : 35],
- endAt: [0, (index === 0 || item.workTypeId === '0') ? 25 : 35]
- })
- }
- }
- })
- })
-
- this.$nextTick(() => {
- setTimeout(() => {
- this.nodeList = datanode
- this.linkList = dataline
- }, 200)
- })
- }
- }
- })
- },
- //根据产品ID查询步骤详情
- async productChange(productId) {
- getMouldDetailByProductId(productId).then(async ({data}) => {
- if (data && data.code === '200') {
- this.dataForm = {...this.dataForm, proTechnologyStepLists :data.data}
- // 图纸
- if (this.dataForm.proTechnologyStepLists) {
- const dataline = []
- const datanode = []
- await this.dataForm.proTechnologyStepLists.forEach((v, i) => {
- // eslint-disable-next-line no-unused-vars
- const sortNo = []
- const datas = v.sort((a, b) => Number(a['sortNo']) - Number(b['sortNo']))
- let length = datas.length
- datas.forEach((item, index) => {
- const find = datanode.find(map => map.id === item.stepId)
- if (!find) {
- datanode.push({
- id: item.stepId,
- width: (index === 0 || item.workTypeId === '0') ? 90 : 120,
- height: (index === 0 || item.workTypeId === '0') ? 50 : 70,
- coordinate: item.coordinate.split(','),
- meta: {
- name: item.stepName,
- prop: index === 0 ? 'start' : (index === length - 1) ? 'end' : 'condition',
- notes: item.notes || '',
- workTypeId: item.workTypeId || '',
- type: item.type || ''
- }
- })
- }
- const id = item.stepId
- if ((index + 1) < datas.length) {
- if (datas[index + 1]) {
- dataline.push({
- id: uuid('link'),
- startId: id,
- endId: datas[index + 1].stepId,
- meta: '',
- startAt: [(index === 0 || item.workTypeId === '0') ? 90 : 120, (index === 0 || item.workTypeId === '0') ? 25 : 35],
- endAt: [0, (index === 0 || item.workTypeId === '0') ? 25 : 35]
- })
- }
- }
- })
- })
-
- this.$nextTick(() => {
- setTimeout(() => {
- this.nodeList = datanode
- this.linkList = dataline
- }, 200)
- })
- }
- }
- })
- },
- // 按工种ID查询操作人列表
- getOperatorList(workTypeId) {
- workTypeMasterList(workTypeId).then(({data}) => {
- if (data && data.code === '200') {
- this.operatorList = []
- data.data.forEach(item => {
- this.operatorList.push(item);
- })
- }
- })
- },
- linkDesc (link) {
- return link.meta ? link.meta.desc : ''
- },
- settingSubmit () {
- this.$refs['nodeSetting'].validate((valid) => {
- if (valid) {
- const conf = this.drawerConf
- if (this.drawerConf.type === drawerType.node) {
- if (!conf.info.meta) conf.info.meta = {}
- Object.keys(this.nodeSetting).forEach(key => {
- if (key == 'operatorIds') {
- let idList = this.nodeSetting[key];
- let nameList = [];
- idList.forEach(id => {
- let name = this.operatorList.find(item => {
- return item.userId === id
- }).name
- nameList.push(name)
- })
-
- this.$set(conf.info.meta, 'desc', nameList.join(','))
- }
- this.$set(conf.info.meta, key, this.nodeSetting[key])
- })
- this.$refs.nodeSetting.resetFields()
- } else {
- if (!conf.info.meta) conf.info.meta = {}
- Object.keys(this.linkSetting).forEach(key => {
- this.$set(conf.info.meta, key, this.linkSetting[key])
- })
- this.$refs.linkSetting.resetFields()
- }
- conf.visible = false
- }
- })
- },
- dataFormSubmit () {
- if (!this.datas.nodeList) {
- this.$message.error('请先完成流程图!')
- return
- }
- if (this.datas.nodeList.length <= 2) {
- this.$message.error('请先完成流程图!')
- return
- }
- this.$refs['dataForm'].validate((valid) => {
- if(valid) {
- const proTechnologyStepLists = []
-
- let productionPlanSteps = []
- for (let index = 0; index < this.datas.nodeList.length; index++) {
- const v = this.datas.nodeList[index];
- let tmp = v.meta.operatorIds || []
- if(v.meta.prop !== 'end' && tmp.length == 0){
- this.$message.error(`请选择 ${v.meta.name} 的操作人员!`)
- return
- }
- productionPlanSteps.push({stepId: v.id, operatorId: tmp.join(',')})
- }
- let submitData = {
- mouldName: this.dataForm.mouldName,
- productId: this.dataForm.productId,
- stepList: productionPlanSteps
- }
- if(this.mouldId === 0) {
- // 新增
- saveProdProductionMould(submitData).then(({data}) => {
- if (data && data.code === '200') {
- this.$message({
- message: '操作成功',
- type: 'success',
- duration: 1500,
- onClose: () => {
- this.$emit('refreshDataList')
- this.visible = false
- }
- })
- } else {
- this.$message.error(data.msg)
- }
- })
- } else {
- // 更新
- submitData.mouldId = this.mouldId;
- updateProdProductionMould(submitData).then(({data}) => {
- if (data && data.code === '200') {
- this.$message({
- message: '操作成功',
- type: 'success',
- duration: 1500,
- onClose: () => {
- this.$emit('refreshDataList')
- this.visible = false
- }
- })
- } else {
- this.$message.error(data.msg)
- }
- })
- }
- }
- })
- },
- getLineData (dataAll, dList, lList, id, sortNo) {
- const _l = []
- lList.forEach(l => {
- if (l.start.id === id) {
- _l.push(l.end.id)
- }
- })
- if (!sortNo) {
- const data = dList.filter(v => v.meta.prop === 'start')[0]
- _l.forEach(item => {
- dataAll.push([{
- 'notes': data.meta.desc || '',
- 'sortNo': 0,
- 'stepId': data.id,
- 'stepName': data.meta.name,
- 'workTypeId': data.meta.workTypeId || null,
- 'type': data.meta.type || null,
- 'coordinate': data.coordinate.join(','),
- 'operatorIds': data.meta.operatorIds
- }])
- })
- }
- dList.forEach(v => {
- const _i = _l.indexOf(v.id)
- if (_i > -1) {
- if (!v.meta.workTypeId && v.meta.prop !== 'end') {
- this.$message.error('完善节点工种')
- return
- }
- if (!sortNo) {
- dataAll[_i].push({
- 'notes': v.meta.desc || '',
- 'sortNo': (sortNo + 1),
- 'stepId': v.id,
- 'stepName': v.meta.name,
- 'workTypeId': v.meta.workTypeId || null,
- 'type': v.meta.type || null,
- 'coordinate': v.coordinate.join(',')
- })
- this.getLineData(dataAll[_i], dList, lList, v.id, (sortNo + 1))
- } else {
- let _has = false
- dataAll.forEach(items => {
- if (items.stepId === v.id) {
- _has = true
- }
- })
- if (!_has) {
- dataAll.push({
- 'notes': v.meta.desc || '',
- 'sortNo': (sortNo + 1),
- 'stepId': v.id,
- 'stepName': v.meta.name,
- 'workTypeId': v.meta.prop === 'end' ? 0 : (v.meta.workTypeId || ''),
- 'type': v.meta.type || '',
- 'coordinate': v.coordinate.join(',')
- })
- }
- this.getLineData(dataAll, dList, lList, v.id, (sortNo + 1))
- }
- }
- })
- },
- }
- }
- </script>
- <style scoped>
- </style>
|