基于vue-Ant实现工单计划弹窗
Posted 尔嵘
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了基于vue-Ant实现工单计划弹窗相关的知识，希望对你有一定的参考价值。
前言
本文是一篇基于vue2和ant-design实现的前端简易工单弹窗的功能示范！
代码部分
template区域：
<a-modal v-if="isAdd" :visible="deviceInfoVisible" title="新增工单" width="90%" :bodyStyle=" 'max-height': '700px', overflowY: 'auto' " :footer="null" @cancel="handleDeviceInfoCancel">
<a-form-model layout="inline" :model="addForm" ref="addForm" :rules="rules" style="height: 400px" labelAlign="right">
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="12" :xxl="12">
<a-form-model-item label="工单类型">
<a-radio-group v-model="addForm.sheetType" button-style="solid" style="width: 100%">
<a-radio-button :value="1">巡视工单</a-radio-button>
<a-radio-button :value="2">检修工单</a-radio-button>
<a-radio-button :value="3">抢修工单</a-radio-button>
<a-radio-button :value="4">预处理工单</a-radio-button>
</a-radio-group>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="站点名称" prop="plantId">
<a-select v-model="addForm.plantId" allowClear option-label-prop="label" :filter-option="filterOption" style="width: 300px" :dropdownMatchSelectWidth="false" :dropdownStyle=" width: '300px' " placeholder="请选择站点" @change="handleAddPlantChange">
<a-select-option v-for="(item, index) in plantShipList" :key="index" :value="item.id" :label="item.plantName">
<div style="display: flex">
<div class="eclicape" style="width: 230px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis" :title="item.plantName"> item.plantName </div>
<div class="eclicape" style="width: 70px; text-align: center; border: 1px solid #16f5e6; color: #16f5e6; border-radius: 6px"> item.plantShip == 0 ? '未知' : item.plantShip == 1 ? '贷款' : item.plantShip == 2 ? '全额' : item.plantShip == 3 ? '租赁投资' : item.plantShip == 4 ? '公司自持' : '' </div>
</div>
</a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item prop="devId" label="设备名称">
<a-select v-model="addForm.devId" style="width: 300px" @change="handleDeviceNameChange">
<a-select-option v-for="item in deviceDataList" :key="item.id"> item.devName </a-select-option>
</a-select>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="运维团队" prop="operationTeam">
<a-input v-model="addForm.operationTeam" placeholder="请输入" :maxLength="400" style="width: 300px"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="问题类型" prop="sheetBugType">
<a-select v-model="addForm.sheetBugType" style="width: 300px">
<a-select-option v-for="item in sheetBugTypeList" :key="item.value"> item.label </a-select-option>
</a-select>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="缺陷描述" prop="sheetDeclare">
<a-input v-model="addForm.sheetDeclare" placeholder="请输入工单内容描述" style="width: 300px"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="运维价格" prop="sheetFixPrice">
<a-input v-model="addForm.sheetFixPrice" placeholder="运维价格" :maxLength="400" suffix="¥" style="width: 300px"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="缺陷等级" prop="sheetLevel">
<a-radio-group v-model="addForm.sheetLevel">
<a-radio :value="0">一般</a-radio>
<a-radio :value="1">严重</a-radio>
<a-radio :value="2">紧急</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="紧急状况">
<a-radio-group v-model="addForm.sheetUrgent" style="width: 100%">
<a-radio :value="0">一般</a-radio>
<a-radio :value="1">重要</a-radio>
<a-radio :value="2">紧急</a-radio>
</a-radio-group>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="工单备注">
<a-input v-model="addForm.sheetNotes" placeholder="备注" :maxLength="400" style="width: 300px"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="计划时间">
<a-date-picker mode="date" format="YYYY-MM-DD" :disabled-date="disabledElecStaticDate" :default-value="moment(addForm.sheetOverPlanTime, 'YYYY-MM-DD')" style="width: 300px" placeholder="请选择日期" :allowClear="false" @change="handleBwtimeChange" />
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="工单价格">
<a-input v-model="addForm.sheetPrice" placeholder="工单价格" :maxLength="400" suffix="¥" style="width: 300px"></a-input>
</a-form-model-item>
</a-col>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="故障位置">
<a-input v-model="addForm.sheetTroubleLocation" placeholder="故障位置" :maxLength="400" style="width: 300px"></a-input>
</a-form-model-item>
</a-col>
</a-row>
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="6" :xl="6" :xxl="6">
<a-form-model-item label="现场照片" prop="sheetLocalPicture">
<div style="display: flex; align-items: center">
<a-upload name="avatar" class="avatar-uploader" action :showUploadList="false" :customRequest="uploadImage" list-type="picture-card" :file-list="fileList" :show-file-list="false" :before-upload="beforeUpload" accept=".jpg,.JPG,.jpeg,.JPEG,.png,.PNG,.gif,.GIF">
<div v-if="!addForm.sheetLocalPicture">
<a-icon type="plus" />
<div class="ant-upload-text">上传</div>
</div>
<img v-else :src="addForm.sheetLocalPicture" class="avatar" />
</a-upload>
<a-tooltip placement="right">
<template slot="title">
<span>上传前请确认无误后再进行上传或删除操作</span>
</template>
<a-icon type="info-circle" style="color: #fff" />
</a-tooltip>
</div>
</a-form-model-item>
</a-col>
</a-row>
<div style="text-align: right">
<a-row>
<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24" :xxl="24">
<a-form-model-item>
<a-space>
<a-button type="primary" style="color: #16f5e6; background: #1b2530" @click="handleCancalOrder">取消</a-button>
</a-space>
<a-space>
<a-button type="primary" style="color: #16f5e6; background: #1b2530; margin-left: 10px" @click="handleAddSave">保存</a-button>
</a-space>
</a-form-model-item>
</a-col>
</a-row>
</div>
</a-form-model>
</a-modal>js部分：
(1).data定义区：
data()
return
isAdd: false,
deviceInfoVisible: false,
loading: false,
rules: //新增工单规则
addForm:
plantId: '', //站点id
devId: '', //设备id
sheetLevel: 0, //缺陷等级
sheetDeclare: '', //缺陷描述
sheetNotes: '', //登记备注
operationTeam: '', //运维团队
sheetTroubleLocation: '', //故障位置
sheetBugType: 1, //问题类型:1-故障停机，2-发电量低，3-通讯离线，0-其他
sheetUrgent: 0, //工单紧急状况：0一般，1重要，2紧急
sheetType: 1, //工单类型：1巡视工单，2检修工单，3抢修工单，4预处理工单
sheetFixPrice: '', //运维价格
sheetPrice: '', //工单价格
sheetOverPlanTime: null, //预计完成时间
sheetLocalPicture: '' //上传的图片回显地址
,
plantShipList: [
id: '-1',
plantName: '全部'
], //电站列表
deviceDataList: [], //设备列表
fileList: [],
(2).methods:
methods:
moment,
// 取消显示详情
handleDeviceInfoCancel()
this.deviceInfoVisible = false;
,
filterOption(input, option)
return option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0;
,
//选择设备
handleDeviceNameChange() ,
//时间(日)限制范围
disabledElecStaticDate(current)
return current && current > moment().endOf('day');
,
//图片上传之前
beforeUpload(file)
const isType = file.type === 'image/jpeg' || 'image/png' || 'image/jpg';
const isLt2M = file.size / 1024 / 1024 < 2;
if (!isType)
this.$message.config(
maxCount: 1,
);
this.$message.destroy();
this.$message.error('图片格式错误,请上传图片!');
if (!isLt2M)
this.$message.config(
maxCount: 1,
);
this.$message.destroy();
this.$message.error('上传头像图片大小不能超过 2MB!');
return isType && isLt2M;
,
//图片上传
uploadImage(file)
let _this = this,
data = file.file,
fileParams = new FormData();
_this.loading = true;
fileParams.append('file', data);
if (_this.isAdd)
_this.addOrderFile = data;
else
_this.editOrderFile = data;
//updateImage根据实际调取上传接口！
updateImage(fileParams).then(( data: res ) =>
if (res.code != 0)
_this.loading = false;
return _this.$message.error(res.msg);
_this.addForm.sheetLocalPicture = 'http://' + res.data.src; //此处根据后端要求来的，方便回显上传的图片
_this.loading = false;
);
,
//取消工单
handleCancalOrder()
if (this.isAdd)
this.$refs['addForm'].resetFields();
this.deviceInfoVisible = false;
,
//新增工单
handleAddSave()
let _this = this;
_this.$refs.addForm.validate((valid) =>
if (!valid)
return false;
_this.loading = true;
if (_this.isAdd)
//新增接口-带formData和对象格式的传值
let formDataAdd = new FormData();
formDataAdd.append('file', _this.addOrderFile);
formDataAdd.append('plantId', _this.addForm.plantId);
formDataAdd.append('devId', _this.addForm.devId);
formDataAdd.append('sheetLevel', _this.addForm.sheetLevel);
formDataAdd.append('sheetDeclare', _this.addForm.sheetDeclare);
formDataAdd.append('sheetNotes', _this.addForm.sheetNotes);
formDataAdd.append('operationTeam', _this.addForm.operationTeam);
formDataAdd.append('sheetTroubleLocation', _this.addForm.sheetTroubleLocation);
formDataAdd.append('sheetBugType', _this.addForm.sheetBugType);
formDataAdd.append('sheetUrgent', _this.addForm.sheetUrgent);
formDataAdd.append('sheetType', _this.addForm.sheetType);
formDataAdd.append('sheetFixPrice', _this.addForm.sheetFixPrice);
formDataAdd.append('sheetPrice', _this.addForm.sheetPrice);
formDataAdd.append('sheetOverPlanTime', _this.addForm.sheetOverPlanTime);
addOrder(formDataAdd)
.then(( data: res ) =>
if (res.code !== 0)
_this.loading = false;
_this.$message.config(
maxCount: 1,
);
_this.$message.destroy();
return _this.$message.error(res.msg);
_this.$message.config(
maxCount: 1,
);
_this.$message.destroy();
_this.$message.success(
content: '新增工单成功!',
duration: 0.5,
onClose: () =>
_this.deviceInfoVisible = false;
_this.getOrderPageListData();
,
);
_this.loading = false;
)
.catch((error) =>
console.log(error);
_this.loading = false;
return false;
);
);
,
//获取工单分页数据
getOrderPageListData()
总结：
代码可能不完整，仅供参考，拒绝完全白嫖！
以上是关于基于vue-Ant实现工单计划弹窗的主要内容，如果未能解决你的问题，请参考以下文章
(前后端都开源)Activiti Flowable Camunda json转bpmn 仿钉钉流程设计器 vue2vue3 Ant Design Wflow-web smart-flow-design