<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">
|
<a-input :disabled="disSeach" :readOnly="disableSubmit" 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="设备功率" :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">
|
<a-input :disabled="true" :readOnly="disableSubmit" 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">
|
<a-input :disabled="disableSubmit" :readOnly="disableSubmit" placeholder="请输入排序"
|
v-model="model.sortNo" style="width: 100%"/>
|
</a-form-model-item>
|
</a-col>
|
<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-bootom-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 AFormModelItem from 'ant-design-vue/es/form-model/FormItem'
|
import {mapActions} from 'vuex'
|
export default {
|
name: "UserModal",
|
components: {
|
AFormModelItem,
|
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: '请选择设备编号!'
|
},
|
// {
|
// validator: this.validatequipmentId
|
// }
|
],
|
// trigger: 'blur' // 触发方式
|
|
selectedProduction:
|
[
|
{
|
required:true,message: '请选择车间'
|
}
|
]
|
|
},
|
departIdShow:false,
|
title:"操作",
|
visible: false,
|
model: {
|
equipmentId: "",
|
equipmentName: "",
|
equipmentModel: "",
|
equipmentIp: "",
|
dataPort: "",
|
driveType: ""
|
},
|
labelCol: {
|
xs: { span: 24 },
|
sm: { span: 6 },
|
},
|
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: {
|
...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.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:""});
|
},
|
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();
|
},
|
moment,
|
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;
|
}
|
})
|
},
|
// handleSubmit () {
|
// const that = this;
|
// // 触发表单验证
|
// this.form.validateFields((err,values) => {
|
// if (!err) {
|
// that.confirmLoading = true;
|
// let formData = Object.assign(this.model, values)
|
// let obj;
|
// if(!this.model.id){
|
// // this.model.id = this.userId;
|
// this.form.resetFields()
|
// obj=addEquipment(formData);
|
// }else{
|
// this.form.resetFields()
|
// obj=editEquipment(formData);
|
// // this.$nextTick(() => {
|
// // this.form.setFieldsValue(pick(this.model, 'tierType', 'parentName', 'tierNumber', 'tierName', 'equipmentId', 'equipmentName', 'equipmentModel', 'equipmentType', 'equipmentIp', 'dataPort',
|
// // 'driveType', 'controlSystem', 'sortNo', 'remark','systemVersion','devicePower'))
|
// // })
|
// // obj=editEquipment(formData,{
|
// // id: this.model.id
|
// // });
|
// }
|
// obj.then((res)=>{
|
// if(res.success){
|
// that.$message.success(res.message);
|
// that.$emit('ok');
|
// }else{
|
// that.$message.warning(res.message);
|
// }
|
// }).finally(() => {
|
// that.confirmLoading = false;
|
// that.close();
|
// })
|
// }else{
|
// return false;
|
// }
|
// })
|
// },
|
|
// validatequipmentId(rule, value, callback){
|
// if(!value){
|
// callback()
|
// }else{
|
// console.log(1111111111111111)
|
// var params = {
|
// tableName: 'mdc_equipment',
|
// fieldName: 'equipment_id',
|
// fieldVal: value,
|
// // dataId: this.userId
|
// };
|
// duplicateCheck(params).then((res) => {
|
// if (res.success) {
|
// callback()
|
// } else {
|
// callback("设备编号已存在!")
|
// }
|
// })
|
//
|
// }
|
// },
|
|
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-bootom-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>
|
