<template>
|
<a-modal
|
:title="title"
|
:maskClosable="true"
|
:width="drawerWidth"
|
@cancel="visible=false"
|
:visible="visible"
|
:footer="null"
|
style="height: 100%;overflow: auto;padding-bottom: 53px;">
|
|
<template slot="title">
|
<div style="width: 100%;">
|
<span>{{ title }}</span>
|
<span style="display:inline-block;width:calc(100% - 51px);padding-right:10px;text-align: right">
|
<a-button @click="toggleScreen" icon="appstore" style="height:20px;width:20px;border:0px"></a-button>
|
</span>
|
</div>
|
|
</template>
|
|
<a-spin :spinning="confirmLoading">
|
<a-form-model ref="form" :form="form" :model="model" :rules="validatorRules">
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="统一编码" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentId">
|
<a-input-search :readOnly="true"
|
v-model="model.equipmentId"
|
:disabled="disSeach" @search="deviceSearch" enter-button placeholder='请选择统一编码'/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="设备名称" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentName">
|
<a-input allow-clear placeholder="请输入设备名称"
|
v-model="model.equipmentName"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item v-if="isDepartType == 0" label="部门分配" :labelCol="labelCol" :wrapperCol="wrapperCol"
|
v-show="!departDisabled">
|
<j-select-equipment-depart :disabled="disableSubmit" v-model="model.selectedDeparts" :multi="false"
|
@back="backDepartInfo" :backDepart="true"
|
:treeOpera="true"></j-select-equipment-depart>
|
</a-form-model-item>
|
|
<a-form-model-item v-if="isDepartType == -1" label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="请选择设备类型"
|
:triggerChange="true"
|
v-model="model.equipmentType">
|
<a-select-option v-for='item in selectList' :key='item.id' :value='item.equipmentTypeName'>
|
{{item.equipmentTypeName}}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="车间分配" :labelCol="labelCol" :wrapperCol="wrapperCol" v-show="!productionDisabled"
|
ref="selectedProduction" prop="selectedProduction">
|
<!--<j-select-equipment-production v-decorator="['selectedProduction',{rules:[{required:true,message:'请选择车间!'}]}]" :multi="false" @back="backProductionInfo" :backProduction="true" :treeProductOpera="true"></j-select-equipment-production>-->
|
<j-select-equipment-production :disabled="disableSubmit" v-model="model.selectedProduction" :multi="false"
|
@back="backProductionInfo" :backProduction="true"
|
:treeProductOpera="true"></j-select-equipment-production>
|
</a-form-model-item>
|
|
</a-col>
|
</a-row>
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item v-if="isDepartType == -1" label="系统版本号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear placeholder="请输入系统版本号"
|
v-model="model.systemVersion"/>
|
</a-form-model-item>
|
<a-form-model-item v-if="isDepartType == 0" label="设备类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-select :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="请选择设备类型"
|
:triggerChange="true"
|
v-model="model.equipmentType">
|
<a-select-option v-for='item in selectList' :key='item.id' :value='item.equipmentTypeName'>
|
{{item.equipmentTypeName}}
|
</a-select-option>
|
</a-select>
|
</a-form-model-item>
|
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="设备功率(kw)" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear placeholder="请输入设备功率"
|
v-model="model.devicePower"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="机床IP" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input :disabled="true" :readOnly="disableSubmit" placeholder="请输入机床IP"
|
v-model="model.equipmentIp"/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="机床端口" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input :disabled="true" :readOnly="disableSubmit" placeholder="请输入机床端口"
|
v-model="model.dataPort"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="驱动类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<j-dict-select-tag :disabled="true" :readOnly="disableSubmit" placeholder="请选择驱动类型"
|
:triggerChange="true" dictCode="mdc_driveType"
|
v-model="model.driveType" allow-clear/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="设备型号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="equipmentModel">
|
<a-input allow-clear placeholder="请输入设备型号"
|
v-model="model.equipmentModel"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12">
|
<a-form-model-item label="系统类型" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<j-dict-select-tag placeholder="请选择系统类型" :triggerChange="true" dictCode="system_type"
|
v-model="model.systemType" allow-clear/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12">
|
<a-form-model-item label="异常状态" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<j-dict-select-tag placeholder="请选择设备异常状态" dictCode="device_abnormal_status"
|
v-model="model.deviceAbnormalStatus" allow-clear :defaultValue="1"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<!--<a-col :span="12">-->
|
<!--<a-form-model-item label="设备种类" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
|
<!--<j-dict-select-tag placeholder="请选择设备种类" dictCode="device_category" v-model="model.deviceCategory"-->
|
<!--allow-clear/>-->
|
<!--</a-form-model-item>-->
|
<!--</a-col>-->
|
<a-col :span="12">
|
<a-form-model-item label="设备级别" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<j-dict-select-tag @change="handleDeviceLevelChange" placeholder="请选择设备级别"
|
dictCode="device_level"
|
v-model="model.deviceLevel" allow-clear/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12" v-if="model.deviceLevel==='A'">
|
<a-form-model-item label="重要程度" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<j-dict-select-tag placeholder="请选择设备重要程度" dictCode="device_importance_level"
|
v-model="model.deviceImportanceLevel" allow-clear/>
|
</a-form-model-item>
|
</a-col>
|
<a-col :span="12" v-else>
|
<a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="请输入排序"
|
v-model="model.sortNo" style="width: 100%"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="12" v-if="model.deviceLevel==='A'">
|
<a-form-model-item label="排序" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="请输入排序"
|
v-model="model.sortNo" style="width: 100%"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span='12'>
|
<a-form-model-item v-if="isDepartType == 0" label="系统版本号" :labelCol="labelCol" :wrapperCol="wrapperCol">
|
<a-input :disabled="disableSubmit" :readOnly="disableSubmit" allow-clear placeholder="请输入系统版本号"
|
v-model="model.systemVersion"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
|
<a-row :gutter="24">
|
<a-col :span="24">
|
<a-form-model-item :labelCol="{span:3}" :wrapperCol="{span:21}" label="备注">
|
<a-textarea :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="请输入备注"
|
v-model="model.remark"/>
|
</a-form-model-item>
|
</a-col>
|
</a-row>
|
</a-form-model>
|
</a-spin>
|
|
|
<div class="drawer-bottom-button" v-show="!disableSubmit">
|
<a-popconfirm title="确定放弃操作？" @confirm="close" okText="确定" cancelText="取消">
|
<a-button style="margin-right: .8rem">取消</a-button>
|
</a-popconfirm>
|
<a-button @click="handleSubmit" type="primary" :loading="confirmLoading">提交</a-button>
|
</div>
|
<device-list-model ref="deviceListModel" @sendSelectionRows="getDeviceRows"></device-list-model>
|
</a-modal>
|
|
</template>
|
|
<script>
|
import pick from 'lodash.pick'
|
import moment from 'moment'
|
import Vue from 'vue'
|
import { ACCESS_TOKEN } from '@/store/mutation-types'
|
import { getAction } from '@/api/manage'
|
import { addEquipment, editEquipment, queryUserRole, queryall } from '@/api/api'
|
import { disabledAuthFilter } from '@/utils/authFilter'
|
import { duplicateCheck } from '@/api/api'
|
import JSelectEquipmentProduction from '../../../../../components/jeecgbiz/JSelectEquipmentProduction'
|
import JSelectProduction from '../../../../../components/jeecgbiz/JSelectProduction'
|
import DeviceListModel from './DeviceListModal'
|
import JSelectEquipmentDepart from '../../../../../components/jeecgbiz/JSelectEquipmentDepart'
|
import { mapActions } from 'vuex'
|
|
export default {
|
name: 'UserModal',
|
components: {
|
JSelectProduction,
|
JSelectEquipmentDepart,
|
JSelectEquipmentProduction,
|
DeviceListModel
|
},
|
data() {
|
return {
|
disSeach: false,
|
departDisabled: false, //是否是我的部门调用该页面
|
productionDisabled: false, //是否是我的车间调用该页面
|
roleDisabled: false, //是否是角色维护调用该页面
|
modalWidth: 800,
|
drawerWidth: 700,
|
modaltoggleFlag: true,
|
confirmDirty: false,
|
userId: '', //保存用户id
|
// disableSubmit:false,
|
disableSubmit: true,
|
dateFormat: 'YYYY-MM-DD',
|
form: this.$form.createForm(this),
|
|
validatorRules: {
|
// equipmentId: [{required: false, message: '请选择设备编号!'}, {validator: this.validatequipmentId}],
|
equipmentId:
|
[
|
{
|
required: true, message: '请选择设备编号!'
|
}
|
],
|
equipmentName:
|
[
|
{
|
required: true, message: '请输入设备名称!'
|
}
|
],
|
equipmentModel:
|
[
|
{
|
required: true, message: '请输入设备型号!'
|
}
|
],
|
selectedProduction:
|
[
|
{
|
required: true, message: '请选择车间'
|
}
|
]
|
|
},
|
departIdShow: false,
|
title: '操作',
|
visible: false,
|
model: {
|
equipmentId: '',
|
equipmentName: '',
|
equipmentModel: '',
|
equipmentIp: '',
|
dataPort: '',
|
driveType: '',
|
systemType: '',
|
deviceLevel: '',
|
deviceAbnormalStatus: ''
|
// deviceCategory: ''
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 8 }
|
},
|
wrapperCol: {
|
xs: { span: 24 },
|
sm: { span: 15 }
|
},
|
uploadLoading: false,
|
confirmLoading: false,
|
headers: {},
|
url: {
|
fileUpload: window._CONFIG['domianURL'] + '/sys/common/upload',
|
userWithDepart: '/mdc/mdcEquipment/equipmentDepartList', // 引入为指定用户查看部门信息需要的url
|
//引入为指定用户查看车间信息需要的url
|
userProductionList: '/mdc/mdcEquipment/equipmentProductionList',
|
userId: '/sys/user/generateUserId', // 引入生成添加用户情况下的url
|
syncUserByUserName: '/act/process/extActProcess/doSyncUserByUserName',//同步用户到工作流
|
queryTenantList: '/sys/tenant/queryList',
|
check: '/sys/duplicate/check',
|
queryEquipmentType: '/mdc/mdcEquipmentType/queryEquipmentType'
|
},
|
tenantsOptions: [],
|
rolesOptions: [],
|
nextDepartOptions: [],
|
nextProductionOptions: [],
|
selectList: [],
|
isDepartType: ''
|
}
|
},
|
created() {
|
const token = Vue.ls.get(ACCESS_TOKEN)
|
this.headers = { 'X-Access-Token': token }
|
this.queryGroup()
|
this.queryTreeData()
|
// this.initRoleList()
|
// this.initTenantList()
|
},
|
computed: {
|
uploadAction: function() {
|
return this.url.fileUpload
|
}
|
},
|
methods: {
|
moment,
|
...mapActions(['QueryDepartTree']),
|
queryTreeData() {
|
this.QueryDepartTree().then(res => {
|
if (res.success) {
|
this.isDepartType = res.result[0].value
|
} else {
|
// this.$message.warn(res.message)
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
})
|
},
|
queryGroup() {
|
getAction(this.url.queryEquipmentType).then(res => {
|
if (res.success) {
|
this.selectList = res.result
|
// this.selectList = res.result.map((item, index, arr) => {
|
// return { label: item.id, value: item.equipmentTypeName + '' }
|
// })
|
} else {
|
// this.$message.warning(res.message)
|
this.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
this.loading = false
|
})
|
},
|
getDeviceRows(val) {
|
console.log(val)
|
if (val.equipmentid) {
|
this.removeValidate()
|
this.model.equipmentId = val.equipmentid
|
this.model.equipmentName = val.equipmentname
|
this.model.equipmentModel = val.equipmentmodel
|
this.model.equipmentIp = val.equipmentip
|
this.model.dataPort = val.dataport
|
this.model.driveType = val.drivetype
|
this.model.controlSystem = val.controlsystem
|
this.model.saveTableName = val.savetablename
|
// setTimeout(() =>{
|
// this.form.setFieldsValue({
|
// equipmentId: val.equipmentid,
|
// equipmentName: val.equipmentname,
|
// equipmentModel: val.equipmentmodel,
|
// equipmentIp: val.equipmentip,
|
// dataPort: val.dataport,
|
// driveType: val.drivetype
|
// })
|
// },1000)
|
|
}
|
|
},
|
deviceSearch() {
|
this.$refs.deviceListModel.openPage()
|
this.$refs.deviceListModel.title = '选择设备'
|
this.$refs.deviceListModel.disableSubmit = false
|
},
|
add() {
|
// this.form.resetFields()
|
// this.$refs.formModel.resetFields()
|
this.refresh()
|
|
this.edit({
|
activitiSync: '1',
|
userIdentity: 1,
|
equipmentId: '',
|
equipmentName: '',
|
equipmentModel: '',
|
equipmentIp: '',
|
dataPort: '',
|
driveType: '',
|
controlSystem: '',
|
saveTableName: '',
|
deviceImportanceLevel: '',
|
deviceAbnormalStatus: 1
|
})
|
},
|
edit(record) {
|
let that = this
|
that.visible = true
|
//根据屏幕宽度自适应抽屉宽度
|
this.resetScreenSize()
|
|
// that.userId = record.id;
|
// console.log(record)
|
that.model = Object.assign({}, record)
|
// that.model = Object.assign({},{selectedroles:'',selectedProduction:''}, record);
|
// this.model = Object.assign({}, record)
|
|
this.$nextTick(() => {
|
this.form.setFieldsValue(pick(that.model, 'selectedDeparts', 'selectedProduction', 'equipmentId', 'equipmentName', 'equipmentModel', 'equipmentType', 'equipmentIp', 'dataPort',
|
'driveType', 'sortNo', 'remark', 'systemVersion', 'devicePower', 'controlSystem', 'saveTableName'))
|
})
|
if (record.hasOwnProperty('id')) {
|
// that.getUserRoles(record.id);
|
that.getUserDeparts(record.id)
|
}
|
// console.log('that.model=',that.model)
|
},
|
isDisabledAuth(code) {
|
return disabledAuthFilter(code)
|
},
|
//窗口最大化切换
|
toggleScreen() {
|
if (this.modaltoggleFlag) {
|
this.modalWidth = window.innerWidth
|
} else {
|
this.modalWidth = 800
|
}
|
this.modaltoggleFlag = !this.modaltoggleFlag
|
},
|
// 根据屏幕变化,设置抽屉尺寸
|
resetScreenSize() {
|
let screenWidth = document.body.clientWidth
|
if (screenWidth < 500) {
|
this.drawerWidth = screenWidth
|
} else {
|
this.drawerWidth = 700
|
}
|
},
|
getUserDeparts(userid) {
|
let that = this
|
//部门的url
|
getAction(that.url.userWithDepart, { equipmentId: userid }).then((res) => {
|
if (res.success) {
|
// console.log(res.result)
|
let departOptions = []
|
let selectDepartKeys = []
|
for (let i = 0; i < res.result.length; i++) {
|
selectDepartKeys.push(res.result[i].key)
|
//新增负责部门选择下拉框
|
departOptions.push({
|
value: res.result[i].key,
|
label: res.result[i].title
|
})
|
}
|
|
that.model.selectedDeparts = selectDepartKeys.join(',')
|
// that.model.selectedProduction = selectDepartKeys.join(",")
|
|
that.nextDepartOptions = departOptions
|
// console.log('that.nextDepartOptions=',that.nextDepartOptions)
|
}
|
})
|
|
getAction(that.url.userProductionList, { equipmentId: userid }).then((res) => {
|
if (res.success) {
|
// console.log(res.result)
|
let ProductionOptions = []
|
let selectProductKeys = []
|
// console.log(res.result)
|
for (let i = 0; i < res.result.length; i++) {
|
selectProductKeys.push(res.result[i].key)
|
//新增负责部门选择下拉框
|
ProductionOptions.push({
|
value: res.result[i].key,
|
label: res.result[i].title
|
})
|
}
|
|
that.model.selectedProduction = selectProductKeys.join(',')
|
|
that.nextProductionOptions = ProductionOptions
|
// console.log('that.nextProductionOptions=',that.nextProductionOptions)
|
}
|
})
|
//车间的url
|
},
|
backDepartInfo(info) {
|
// console.log(info)
|
this.model.departIds = this.model.selectedDeparts
|
this.nextDepartOptions = info.map((item, index, arr) => {
|
let c = { label: item.text, value: item.value + '' }
|
return c
|
})
|
},
|
backProductionInfo(info) {
|
// console.log(info)
|
this.model.productionIds = this.model.selectedProduction
|
this.nextProductionOptions = info.map((item, index, arr) => {
|
let c = { label: item.text, value: item.value + '' }
|
return c
|
})
|
},
|
refresh() {
|
this.userId = ''
|
this.nextDepartOptions = []
|
this.nextProductionOptions = []
|
this.departIdShow = false
|
},
|
close() {
|
this.$emit('close')
|
this.visible = false
|
this.disableSubmit = false
|
this.nextDepartOptions = []
|
this.nextProductionOptions = []
|
this.departIdShow = false
|
// this.$refs.form.resetFields();
|
},
|
handleDeviceLevelChange() {
|
this.model.deviceImportanceLevel = ''
|
},
|
handleSubmit() {
|
const that = this
|
// 触发表单验证
|
this.$refs.form.validate(valid => {
|
if (valid) {
|
that.confirmLoading = true
|
//如果是上级择传入departIds,否则为空
|
// if(this.model.userIdentity!==2){
|
// this.model.departIds="";
|
// }
|
let obj
|
if (!this.model.id) {
|
this.model.id = this.userId
|
obj = addEquipment(this.model)
|
} else {
|
obj = editEquipment(this.model, {
|
id: this.model.id
|
})
|
}
|
obj.then((res) => {
|
if (res.success) {
|
// that.$message.success(res.message);
|
that.$notification.success({
|
message: '消息',
|
description: res.message
|
})
|
that.$emit('ok')
|
} else {
|
// that.$message.warning(res.message);
|
that.$notification.warning({
|
message: '消息',
|
description: res.message
|
})
|
}
|
}).finally(() => {
|
that.confirmLoading = false
|
that.close()
|
})
|
} else {
|
return false
|
}
|
})
|
},
|
handleConfirmBlur(e) {
|
const value = e.target.value
|
this.confirmDirty = this.confirmDirty || !!value
|
},
|
identityChange(e) {
|
if (e.target.value === 1) {
|
this.departIdShow = false
|
} else {
|
this.departIdShow = true
|
}
|
},
|
/**
|
* 编辑或查看详情数据时清除抽屉表单验证
|
*/
|
removeValidate() {
|
this.$refs.form.clearValidate()
|
}
|
}
|
|
}
|
</script>
|
|
<style scoped>
|
.avatar-uploader > .ant-upload {
|
width: 104px;
|
height: 104px;
|
}
|
|
.ant-upload-select-picture-card i {
|
font-size: 49px;
|
color: #999;
|
}
|
|
.ant-upload-select-picture-card .ant-upload-text {
|
margin-top: 8px;
|
color: #666;
|
}
|
|
.ant-table-tbody .ant-table-row td {
|
padding-top: 10px;
|
padding-bottom: 10px;
|
}
|
|
.drawer-bottom-button {
|
position: absolute;
|
bottom: -8px;
|
width: 100%;
|
border-top: 1px solid #e8e8e8;
|
padding: 10px 16px;
|
text-align: right;
|
left: 0;
|
background: #fff;
|
border-radius: 0 0 2px 2px;
|
}
|
</style>
|
