@ -1,7 +1,6 @@
< template >
< div class = "p-2" >
< transition :enter-active-class = "proxy?.animate.searchAnimate.enter"
:leave-active-class = "proxy?.animate.searchAnimate.leave" >
< transition :enter-active-class = "proxy?.animate.searchAnimate.enter" :leave-active-class = "proxy?.animate.searchAnimate.leave" >
< div v-show = "showSearch" class="mb-[10px]" >
< el -card shadow = "hover" >
< el-form ref = "queryFormRef" :model = "queryParams" :inline = "true" >
@ -24,14 +23,10 @@
< el-button type = "primary" plain icon = "Plus" @click ="handleAdd()" > 新增 < / el -button >
< / el-col >
< el-col :span = "1.5" >
< el-button type = "success" plain :disabled = "single" icon = "Edit" @click ="handleUpdate()" >
修改
< / el -button >
< el-button type = "success" plain :disabled = "single" icon = "Edit" @click ="handleUpdate()" > 修改 < / el -button >
< / el-col >
< el-col :span = "1.5" >
< el-button type = "danger" plain :disabled = "multiple" icon = "Delete" @click ="handleDelete()" >
删除
< / el -button >
< el-button type = "danger" plain :disabled = "multiple" icon = "Delete" @click ="handleDelete()" > 删除 < / el -button >
< / el-col >
< right-toolbar v -model :show-search = "showSearch" :search = "true" @ query -table = " getList " > < / right-toolbar >
< / el-row >
@ -42,8 +37,7 @@
< el-table-column label = "型号名称" align = "center" prop = "typeName" / >
< el-table-column label = "类型code" align = "center" prop = "appModelDictionary" >
< template # default = "scope" >
{ { appmodelDictionaryOptions . find ( item => item . dictValue === String ( scope . row . appModelDictionary ) ) ? . dictLabel
} }
{ { appmodelDictionaryOptions . find ( ( item ) => item . dictValue === String ( scope . row . appModelDictionary ) ) ? . dictLabel } }
< / template >
< / el-table-column >
< el-table-column label = "是否支持蓝牙" align = "center" prop = "isSupportBle" >
@ -81,14 +75,11 @@
< / template >
< / el-table-column >
< / el-table >
< pagination v-show = "total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize"
:total = "total" @pagination ="getList" / >
< pagination v-show = "total > 0" v-model:page="queryParams.pageNum" v-model:limit="queryParams.pageSize" :total="total" @pagination="getList" / >
< / el-card >
<!-- 添加或修改用户配置对话框 -- >
< el-dialog ref = "formDialogRef" v-model = "dialog.visible" :title="dialog.title" width="30%"
@close ="closeDialog" >
< el-dialog ref = "formDialogRef" v-model = "dialog.visible" :title="dialog.title" width="30%" append-to-body @close="closeDialog" >
< el -form ref = "userFormRef" :model = "form" :rules = "rules" label -width = " 120px " >
< el-row >
< el-col :span = "24" >
@ -101,14 +92,12 @@
< el-col :span = "24" >
< el-form-item label = "路由跳转" prop = "appModelDictionary" >
< el-select v-model = "form.appModelDictionary" placeholder="请选择" @change="handlePcRouteChange" >
< el -option v-for = "item in appmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel"
:value = "item.dictValue" / >
< el -option v-for = "item in appmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue" / >
< / el-select >
< / el-form-item >
< el-form-item label = "pc路由跳转" prop = "pcModelDictionary" style = "display: none; " >
< el-form-item label = "pc路由跳转" prop = "pcModelDictionary" style = "display: none" >
< el-select v-model = "form.pcModelDictionary" placeholder="请选择" >
< el -option v-for = "item in pcmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel"
:value = "item.dictValue" / >
< el -option v-for = "item in pcmodelDictionaryOptions" :key="item.dictCode" :label="item.dictLabel" :value="item.dictValue" / >
< / el-select >
< / el-form-item >
< / el-col >
@ -147,6 +136,22 @@
< / el-form-item >
< / el-col >
< / el-row >
< el-row >
< el-col :span = "24" >
< el-form-item label = "设备图片" prop = "devicePic" >
< input type = "file" id = "fileTypeImg" accept = "image/*" style = "display: none" / >
< div class = "devicePic typeImgContent" v-if = "form.devicePic" >
< img class = "img" :src = "form.devicePic" / >
< div class = "mask center" @click.stop ="DropImg(form)" >
< el -icon class = "avatar-uploader-icon" > < Delete / > < / el-icon >
< / div >
< / div >
< div class = "devicePic typeImgAdd center" v-else @click.stop ="AddImg(form)" >
< el -icon class = "avatar-uploader-icon" > < Plus / > < / el-icon >
< / div >
< / el-form-item >
< / el-col >
< / el-row >
< / el-form >
< template # footer >
< div class = "dialog-footer" >
@ -164,7 +169,23 @@ import { deviceTypeQuery } from '@/api/equipmentManagement/deviceType/types';
import { getDicts } from '@/api/system/dict/data' ;
import { to } from 'await-to-js' ;
import { ComponentInternalInstance , getCurrentInstance , onMounted , reactive , ref , toRefs } from 'vue' ;
import { ElDialog , ElForm , ElFormItem , ElInput , ElRow , ElCol , ElButton , ElCard , ElSelect , ElOption , ElDatePicker , ElTable , ElTableColumn , ElTooltip , ElSwitch } from 'element-plus' ;
import {
ElDialog ,
ElForm ,
ElFormItem ,
ElInput ,
ElRow ,
ElCol ,
ElButton ,
ElCard ,
ElSelect ,
ElOption ,
ElDatePicker ,
ElTable ,
ElTableColumn ,
ElTooltip ,
ElSwitch
} from 'element-plus' ;
interface deviceTypeVO {
id : string | number ;
typeName : string ;
@ -176,9 +197,9 @@ interface deviceTypeVO {
communicationMode : number ;
createTime : string ;
createByName : string ;
devicePic : string ;
}
interface DeviceTypeForm extends deviceTypeVO {
}
interface DeviceTypeForm extends deviceTypeVO { }
const { proxy } = getCurrentInstance ( ) as ComponentInternalInstance ;
const deviceTypeList = ref < deviceTypeVO [ ] > ( ) ;
const loading = ref ( true ) ;
@ -190,9 +211,11 @@ const total = ref(0);
const queryFormRef = ref < InstanceType < typeof ElForm > > ( ) ;
const userFormRef = ref < InstanceType < typeof ElForm > > ( ) ;
const formDialogRef = ref < InstanceType < typeof ElDialog > > ( ) ;
const loadingIng = ref ( false )
const loadingIng = ref ( false ) ;
const appmodelDictionaryOptions = ref < any [ ] > ( [ ] ) ;
const pcmodelDictionaryOptions = ref < any [ ] > ( [ ] ) ;
var fileC = null ;
var uploadFile = false ;
const dialog = reactive < DialogOption > ( {
visible : false ,
title : ''
@ -207,7 +230,7 @@ const initFormData: DeviceTypeForm = {
communicationMode : 0 ,
id : '' ,
createTime : '' ,
createByName : '' ,
createByName : ''
} ;
const initData = {
@ -215,28 +238,20 @@ const initData = {
queryParams : {
pageNum : 1 ,
pageSize : 10 ,
typeName : '' ,
typeName : ''
} ,
rules : {
typeName : [
{ required : true , message : '请输入设备类型名称 ' , trigger : 'blur' } ,
] ,
appModelDictionary : [
{ required : true , message : '请选择类型code' , trigger : 'blur' } ,
] ,
locateMode : [
{ required : true , message : '请选择定位方式' , trigger : 'blur' } ,
] ,
communicationMode : [
{ required : true , message : '请选择通讯方式' , trigger : 'blur' } ,
] ,
typeName : [ { required : true , message : '请输入设备类型名称' , trigger : 'blur' } ] ,
appModelDictionary : [ { required : true , message : '请选择类型code ' , trigger : 'blur' } ]
locateMode : [ { required : true , message : '请选择定位方式' , trigger : 'blur' } ] ,
communicationMode : [ { required : true , message : '请选择通讯方式' , trigger : 'blur' } ]
}
} ;
const data = reactive < {
form : DeviceTypeForm ,
queryParams : deviceTypeQuery ,
rules : any
form : DeviceTypeForm ;
queryParams : deviceTypeQuery ;
rules : any ;
} > ( initData ) ;
const { queryParams , form , rules } = toRefs ( data ) ;
@ -252,11 +267,11 @@ const getList = async () => {
const getDict = async ( ) => {
const res = await getDicts ( 'app_model_dictionary' ) ;
appmodelDictionaryOptions . value = res . data ;
}
} ;
const pcgetDict = async ( ) => {
const res = await getDicts ( 'pc_model_dictionary' ) ;
pcmodelDictionaryOptions . value = res . data ;
}
} ;
/** 搜索按钮操作 */
const handleQuery = ( ) => {
queryParams . value . pageNum = 1 ;
@ -270,13 +285,9 @@ const resetQuery = () => {
} ;
// PC路由变化时，
const handlePcRouteChange = ( pcDictValue : string ) => {
const selectedPcItem = appmodelDictionaryOptions . value . find (
item => item . dictValue === pcDictValue
) ;
const selectedPcItem = appmodelDictionaryOptions . value . find ( ( item ) => item . dictValue === pcDictValue ) ;
if ( ! selectedPcItem ) return ;
const matchedAppItem = pcmodelDictionaryOptions . value . find (
item => item . dictLabel === selectedPcItem . dictLabel
) ;
const matchedAppItem = pcmodelDictionaryOptions . value . find ( ( item ) => item . dictLabel === selectedPcItem . dictLabel ) ;
if ( matchedAppItem ) {
form . value . pcModelDictionary = matchedAppItem . dictValue ;
} else {
@ -287,13 +298,15 @@ const handlePcRouteChange = (pcDictValue: string) => {
/** 删除按钮操作 */
const handleDelete = async ( row ? : deviceTypeVO ) => {
const deviceTypeIds = row ? [ row . id ] : ids . value . map ( item => item . id ) ;
const typeNames = row ? row . typeName : ids . value . map ( item => item . typeName ) . join ( ',' ) ;
const [ err ] = await to ( proxy ? . $modal . confirm ( '是否确认删除"' + typeNames + '"的数据项？' , '系统提示' , {
confirmButtonText : '确定 ',
cancel ButtonText: '取消 ' ,
type : 'warning'
} ) as any ) ;
const deviceTypeIds = row ? [ row . id ] : ids . value . map ( ( item ) => item . id ) ;
const typeNames = row ? row . typeName : ids . value . map ( ( item ) => item . typeName ) . join ( ',' ) ;
const [ err ] = await to (
proxy ? . $modal . confirm ( '是否确认删除"' + typeNames + '"的数据项？' , '系统提示 ', {
confirm ButtonText : '确定 ' ,
cancelButtonText : '取消' ,
type : 'warning'
} ) as any
) ;
if ( ! err ) {
await api . deleteDeviceType ( deviceTypeIds ) ;
await getList ( ) ;
@ -350,7 +363,7 @@ const submitForm = () => {
if ( valid ) {
loadingIng . value = true ;
try {
cons tpayload = {
le tpayload = {
... form . value ,
appModelDictionary : form . value . appModelDictionary ,
pcModelDictionary : form . value . pcModelDictionary ,
@ -358,7 +371,27 @@ const submitForm = () => {
locateMode : Number ( form . value . locateMode ) ,
communicationMode : Number ( form . value . communicationMode )
} ;
form . value . id ? await api . updateDeviceType ( payload ) : await api . addDeviceType ( payload ) ;
let formData = new FormData ( ) ;
let keys = Object . keys ( payload ) ;
keys . forEach ( key => {
if ( key !== 'devicePic' ) {
if ( payload [ key ] !== null && payload [ key ] !== undefined ) {
formData . append ( key , payload [ key ] ) ;
}
}
} ) ;
if ( uploadFile && fileC && fileC . files . length ) {
formData . append ( 'file' , fileC . files [ 0 ] ) ;
}
//如果要上传文件就用formData,不上传使用payload
form . value . id ? await api . updateDeviceType ( formData ) : await api . addDeviceType ( formData ) ;
proxy ? . $modal . msgSuccess ( '操作成功' ) ;
dialog . visible = false ;
await getList ( ) ;
@ -369,6 +402,25 @@ const submitForm = () => {
} ) ;
} ;
//删除图片
function DropImg ( item ) {
ElMessageBox . confirm ( '删除后不可恢复，您确认要删除吗?' , '提醒' , {
confirmButtonText : '确认' ,
cancelButtonText : '取消' ,
type : 'warning'
} ) . then ( ( ) => {
form . value . devicePic = null ;
} )
. catch ( ( ) => { } ) ;
}
//选择图片
function AddImg ( item ) {
uploadFile = false ;
initControl ( ) ;
fileC . click ( ) ;
}
/**
* 关闭用户弹窗
*/
@ -386,9 +438,106 @@ const resetForm = () => {
form . value . id = '' ;
} ;
function initControl ( ) {
if ( fileC ) {
fileC . value = "" ;
return ;
}
fileC = document . getElementById ( 'fileTypeImg' ) ;
fileC . addEventListener ( 'change' , function ( ) {
if ( this . files . length ) {
let file = this . files [ 0 ] ;
if ( file . type . indexOf ( 'image/' ) === 0 ) {
let reader = new FileReader ( ) ;
reader . onload = function ( e ) {
uploadFile = true ;
form . value . devicePic = e . target . result ;
} ;
reader . onerror = function ( ) {
console . log ( '读取文件失败！' ) ;
} ;
reader . readAsDataURL ( file ) ;
} else {
// form.value.devicePic = null;
}
} else {
// form.value.devicePic = null;
}
} ) ;
}
onMounted ( ( ) => {
getList ( ) ; // 初始化列表数据
getDict ( ) ;
pcgetDict ( ) //pc跳转
pcgetDict ( ) ; //pc跳转
} ) ;
< / script >
< style >
. devicePic {
width : 120 px ;
height : 120 px ;
border - radius : 6 px ;
box - sizing : border - box ;
overflow : hidden ;
}
. typeImgContent {
background - color : # ffffff ;
border : 1 px solid rgb ( 220 , 223 , 230 ) ;
position : relative ;
}
. typeImgContent . img {
width : 100 % ;
height : 100 % ;
object - fit : contain ;
position : absolute ;
top : 0 px ;
left : 0 px ;
z - index : 0 ;
padding : 10 px ;
}
. center {
display : flex ;
flex - direction : row ;
flex - wrap : nowrap ;
align - content : center ;
align - items : center ;
justify - content : center ;
}
. typeImgAdd {
background - color : # fafafa ;
border : 1 px dashed rgb ( 205 , 208 , 214 ) ;
font - size : 30 px ;
cursor : pointer ;
}
. mask {
background - color : # 1 c1c1c80 ;
position : absolute ;
top : 0 px ;
left : 0 px ;
z - index : 1 ;
width : 0 px ;
height : 0 px ;
cursor : pointer ;
overflow : hidden ;
color : # ff0000 ;
font - size : 25 px ;
}
. typeImgContent : hover . mask {
width : 100 % ;
height : 100 % ;
}
< / style >