1.控制流程再某个节点可以操作某个功能
eg: 发起人-------所在公司总经理-------分公司行政---------结束
流程再分公司行政节点时可以操作调拨按钮
- 调查阅流程历史接口
import {listHistory} from "@/api/activiti/process"
- 流程中方法调接口
//流程历史
const queryParams = { pageNum: 1, pageSize: 10};
listHistory(this.processInfo.instanceId, queryParams).then(response => {
if(response.rows[response.rows.length-1].activityId === 'branchManager'){ //上一个节点是公司总经理'branchManager')
this.processUpdateDisabled = true;
}
})
- return里面定义
processUpdateDisabled:false, - 再需要操作的功能处绑定
processUpdateDisabled
eg: v-if="this.form.processStatus == 1 && processUpdateDisabled"
<el-button
type="primary"
size="mini"
icon="el-icon-plus"
plain
@click="fixedAssetsClick"
v-if="this.form.processStatus == 1 && processUpdateDisabled"
>
固定资产调拨
</el-button>
2.编辑页点查看按钮,打开弹框列表数据来源于下面表单(查看)
具体参考固定资产管理-固资申请编辑页,查看调拨单
<el-button
type="warning"
icon="el-icon-check"
size="mini"
@click="openAllotView()"
v-if="this.form.processStatus == 2 || action == 'view'">查看调拨单</el-button>
核心代码:this.xxxList.push(response.data)
eg:
/** 查看调拨单按钮操作 */
openAllotView() {
selectApplyById(this.form.applyId).then((response) => {
this.allotList = [];
this.allotList.push(response.data);
this.title = "调拨单(查看)";
this.action = "view";
});
this.openAllot = true;
3.vue表格数据动态渲染
标记行默认为0,return里定义行标记
(1)表格总数据不固定
this.列表data绑定值[this.行标记].makeUse = data.empName;
this.$set(this.列表data绑定值,this.行标记,this.列表data绑定值[this.行标记]);
eg: this.pmAssetsApplyItem[this.empOpenIndex].makeUse = data.empName;
this.$set(this.pmAssetsApplyItem,this.empOpenIndex,this.pmAssetsApplyItem[this.empOpenIndex]);
(2)表格数据固定有几条
不需要做标记行
this.$set(this.form.moneyShapeList, 0, this.form.moneyShapeList[0]);
4.附件上传,不同页面查看附件问题
核心代码:
:uploadList=“uploadList(form.salvageBackId, ‘receipt’)”
(1)<el-col :span="12">
<el-form-item label="收据附件">
<upload
:uploadData="uploadDatas(form.salvageBackId, 'receipt')"
:uploadList="uploadList(form.salvageBackId, 'receipt')"
></upload>
</el-form-item>
</el-col>
(2)功能需要时调用uploadList
this.uploadList(this.form.scrapId, "receipt");
(3)uploadList(id, categoryType) {
var uploadData = {
busiId: id,
createName: this.form.createBy,
categoryType: categoryType,
isUpload: false, //是否允许上传文件
};
return uploadData;
},
5.流程状态为流程中或已审批,则禁用修改/删除按钮
return中定义:rowInfo:{},
核心代码
this.rowInfo = selection[0];
// 根据流程状态判断是否编辑
if(this.rowInfo != undefined && this.rowInfo.processStatus > 0){
this.single = true;
}
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.applyId)
this.single = selection.length!==1
this.rowInfo = selection[0];
// 根据流程状态判断是否编辑
if(this.rowInfo != undefined && this.rowInfo.processStatus > 0){
this.single = true;
}
this.multiple = !selection.length
},
6.表单状态为已处理,禁用修改/删除按钮
核心代码 if(!this.single){
this.single = selection[0].formStatus === “1”
}
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.scrapId);
this.single = selection.length !== 1;
if(!this.single){
this.single = selection[0].formStatus === "1"
}
this.multiple = !selection.length;
},
7.根据字典,带出另一个下拉框固定数据
① 选择字典绑定change事件
@change=“repairSpecialityChange(scope)”
②待赋值的下拉框
v-for=“dict in scope.row.repairStandards”
<el-form-item prop="repairSpeciality">
<el-select
size="mini"
v-model="scope.row.repairStandard"
placeholder="请选择标准内容"
clearable
:disabled="action === 'dispatchView'"
>
<el-option
v-for="dict in scope.row.repairStandards"
:key="dict.label"
:label="dict.label"
:value="dict.label"
></el-option>
</el-select>
</el-form-item>
repairSpecialityChange(data){
var data = scope.row;
this.dataRepairInfo[scope.$index].repairStandard="";
if(data.专业字段名 == 1){
let ts =[{label:'电箱',values:"0"},{label:'配管',values:"1"},{label:'桥架',values:"2"},{label:'母线',values:"3"},
{label:'电线电缆',values:"4"},{label:'照明灯具',values:"5"},{label:'开关面板',values:"6"},{label:'消防设备',values:"7"},
{label:'智能化系统',values:"8"},{label:'其他',values:"9"}]
data.需要带出固定数据下拉框v-for绑定值 = ts;
}else if(data.专业字段名 == 2){
let ts =[{label:'PVC管材及配件',values:"0"},{label:'PPR管材及配件',values:"1"},{label:'镀锌管材及配件',values:"2"},{label:'铸铁管材及配件',values:"3"},
{label:'其他管材及配件',values:"4"},{label:'阀门',values:"5"},{label:'洁具',values:"6"},{label:'水泵',values:"7"},
{label:'仪器仪表',values:"8"},{label:'消防器材',values:"9"},{label:'其他',values:"9"}]
data.repairStandards = ts;
}else if(data.repairSpeciality == 3){
let ts =[{label:'通风空调设备',values:"0"},{label:'通风空调配件',values:"1"},{label:'通风空调风管',values:"2"},{label:'冷凝冷媒管道',values:"3"},
{label:'制冷制热机组',values:"4"},{label:'其他',values:"5"}]
data.repairStandards = ts;
}else{
let ts =[{label:'支吊架',values:"0"},{label:'防腐保温',values:"1"},{label:'防火封堵',values:"2"}]
data.repairStandards = ts;
}
},
8.列表内做附件上传,上传成功后,同时带出上传的文件名称,展示在表格指定位置
核心代码: submitSts:false,
components: {
upload: () => import(“@/components/upload”),
},
<el-table-column prop="uploadNames" label="内容" align="center"/>
<el-table-column label="附件" align="center" min-width="110" >
<template slot-scope="scope">
<upload :uploadData="uploadDatas(scope.row.itemId, 'acceptanceAttachmentForm')" @listSysAttachments="listSysAttachments($event,scope.row)"></upload>
<span ref="uploadRef6" v-if="submitSts && !scope.row.uploadNames">请上传附件</span>
</template>
</el-table-column>
//竣工图附件
uploadDatas(id, categoryType) {
if(!id){
return;
}
var createName = this.$store.state.user.name;
var uploadData = {
busiId: id,
createName: createName,
categoryType: categoryType,
//isUpload: false, //只允许查看
isUpload: this.action == "add" || this.action == "update", //是否允许上传文件
};
return uploadData;
},
//附件上传成功后,展示附件名称
listSysAttachments(...data) {
let rows = data[0].rows;
let uploadNames = rows.map((obj)=>{return obj.fileName}).join(",");
//附件名称存储
this.$set(data[1], 'uploadNames', uploadNames);
},
9. 列表底部占位符/
<span
v-show="scope.row.buildStage == '质量扣分' || scope.row.buildStage == '综合得分'"
style="text-align: center">/</span>
10. 动态列表固定列累计求和
(1)input监听事件
@input=“xxxInput(scope)”
(2)求和
/**履约保证金返回金额求和 */
marginBackAmountInput() {
var list = this.form.beCompletedDetailList;
let num = 0;
for (var i = 0; i < list.length; i++) {
if (list[i].marginBackAmount != null &&
list[i].marginBackAmount != undefined &&
list[i].marginBackAmount != ""
) {
num += parseFloat(list[i].marginBackAmount);
}
}
},
10-1.1. 动态列表固定列累计求和,赋值给表单求和字段
校验列表手动输入的值不能大于指定列值
1.1 监听手动输入
@input=“xxxx(scope)”
1.2 求和
deployMoneySumInput(scope){
//校验调配金额不能大于留存金额
let retentionAmount = Number(scope.row.retentionAmount) //留存金额
let mechanicalModel = Number(scope.row.mechanicalModel) //调配金额
if(retentionAmount < mechanicalModel){
this.$set(this.wageData[scope.$index], 'mechanicalModel', scope.row.retentionAmount)
this.$message({
message: '调配金额不能大于留存金额',
type: 'warning'
});
}
//累计求和
var list = this.wageData;
this.form.deployMoneySum = 0;
let num = 0;
for(var i = 0 ; i<list.length ; i++){
if(list[i].mechanicalModel != null && list[i].mechanicalModel != undefined && list[i].mechanicalModel !=""){
num += parseFloat(list[i].mechanicalModel)
}
}
this.$set(this.form, "deployMoneySum", num);
let a = this.deployMoneySumKey;
a += 1;
this.deployMoneySumKey = a;
}
注意:deployMoneySumKey 标识,求和赋值表单字段
:key="deployMoneySumKey "
默认值0
11. 提交前判断两个值是否相等,改变状态
(1)先求和,提交前调用并且比较
/**履约保证金返回金额求和 */
marginBackAmountInput() {
var list = this.form.beCompletedDetailList;
let num = 0;
for (var i = 0; i < list.length; i++) {
if (
list[i].marginBackAmount != null &&
list[i].marginBackAmount != undefined &&
list[i].marginBackAmount != ""
) {
num += parseFloat(list[i].marginBackAmount);
}
}
this.sumNumber = num;
},
//提交前判断履约保证金返回金额是否等于履约保证金金额
this.marginBackAmountInput();
if (this.form.performanceBond != this.sumNumber) {
this.form.backState = "2";
} else {
this.form.backState = "3";
}
12. 指定值-累计
/**履约保证金返回金额求和 */
marginBackAmountInput() {
var list = this.form.beCompletedDetailList;
let num = 0;
for (var i = 0; i < list.length; i++) {
if (
list[i].marginBackAmount != null &&
list[i].marginBackAmount != undefined &&
list[i].marginBackAmount != ""
) {
num += parseFloat(list[i].marginBackAmount);
}
}
this.sumNumber = num;
if(num != 0){
this.form.notBackMoney = this.form.performanceBond - num; //未收回金额
}
},
13. 手机号校验
方法1:
核心代码:maxlength="11"
<el-col :span="8">
<el-form-item label="联系电话" prop="deptPhone">
<el-input v-model="form.deptPhone" disabled placeholder="请输入联系电话" maxlength="11" />
</el-form-item>
</el-col>
核心代码:
手机号: [
{
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
message: "请输入正确的手机号码",
trigger: "blur"
}
]
方法2:
手机号: [
{ required: true, message: '手机号不能为空' },
{ type: 'number',
message: '手机号格式不正确',
trigger: 'blur',
transform (value) {
var phonereg = 11 && /^((13|14|15|16|17|18|19)[0-9]{1}\d{8})$/
if (!phonereg.test(value)) {
return false
}else{
return Number(value)
}
}
}
],
14. 校验邮箱
emailAddress: [
{
required: true,
type: “email”,
message: “请输入正确的邮箱地址”,
trigger: [“blur”, “change”]
}
],
15. 校验日期选择当前日期之前的日期,不能选择比当前日期大的日期
//核心代码
:picker-options="pickerOptions"
pickerOptions: {
// 只选择今天之前的,不包含今天
disabledDate(time) {
let now = new Date(new Date().setHours(0, 0, 0, 0));
// 禁用时间戳大于今天0点的时间
return time.getTime() > now.getTime();
},
},
16. 前后端传值,接收值
get---传字段,post---传实体
(1)1.controller层接收值 PathVariable-get
一个一个接收
① get请求方式接收需把每个值用/ {值} 拼起来接收
@GetMapping("/checkEmpSalary/{accountMonth}/{salaryGroupsCode}")
② @PathVariable注解绑值方式(同上字段顺序一一对应)
@PathVariable("accountMonth") String accountMonth, @PathVariable("salaryGroupsCode") String salaryGroupsCode
③ 例如:
@GetMapping("/checkEmpSalary/{accountMonth}/{salaryGroupsCode}")
public AjaxResult checkEmpSalary(@PathVariable("accountMonth") String accountMonth, @PathVariable("salaryGroupsCode") String salaryGroupsCode)
{
return AjaxResult.success(cmMpEmployeeSalaryService.checkEmpSalary(accountMonth, salaryGroupsCode));
}
2.js传值方式
① 请求地址url随同后端逐个拼起来
url: '/synthesis/CmMpEmployeeSalary/checkEmpSalary/' + accountMonth+"/"+salaryGroupsCode,
例如:
export function checkEmpSalary(salaryGroupsCode, accountMonth) {
return request({
url: '/synthesis/CmMpEmployeeSalary/checkEmpSalary/' + accountMonth+"/"+salaryGroupsCode,
method: 'get',
})
}
(2)RequestParam-get
js
export function checkEmpSalary(accountMonth,salaryGroupsCode) {
return request({
url: '/synthesis/CmMpEmployeeSalary/checkEmpSalary?accountMonth='+accountMonth+"&salaryGroupsCode="+salaryGroupsCode,
method: 'get',
})
}
controller
@GetMapping("/checkEmpSalary")
public AjaxResult checkEmpSalary(@RequestParam("accountMonth") String accountMonth, @RequestParam("salaryGroupsCode") String salaryGroupsCode)
{
return AjaxResult.success(cmMpEmployeeSalaryService.checkEmpSalary(accountMonth, salaryGroupsCode));
}
(3) RequestBody-post
export function checkEmpSalary(data) {
return request({
url: '/synthesis/CmMpEmployeeSalary/checkEmpSalary',
method: 'post',
data: data
})
}
17. 流程
(1)前端没有生成uuid,后端生成
@Autowired
private IProcessService processService;
① 新增
String technologyPlanId = randomStr(32);
pmTechnologyPlan.setTechnologyPlanId(technologyPlanId);
int rows = pmTechnologyPlanService.insertPmTechnologyPlan(pmTechnologyPlan);
if(rows > 0 && pmTechnologyPlan.getUserList() !=null && pmTechnologyPlan.getUserList().size()>0){
//流程开启
LoginUser currentUser = SecurityUtils.getLoginUser();
Map<String, Object> variables =new HashMap<String, Object>();
//发起流程并越过发起人
List<ActIdUser> actIdUsers = new ArrayList<ActIdUser>();
for(SysUser sysUser:pmTechnologyPlan.getUserList()) {
ActIdUser actIdUser = new ActIdUser();
actIdUser.setId(sysUser.getUserName());
actIdUser.setFirst(sysUser.getNickName());
actIdUsers.add(actIdUser);
}
ProcessInstance processInstance = processService.submitApply(currentUser.getUser().getUserName().toString(),
technologyPlanId,
pmTechnologyPlan.getItemName()+"-技术方案",
pmTechnologyPlan.getItemName()+"-技术方案",
ProcessConstants.PM_TECHNOLOGY_PLAN, variables,actIdUsers,true);
PmTechnologyPlan updateEntity = new PmTechnologyPlan();
updateEntity.setTechnologyPlanId(technologyPlanId);
updateEntity.setUpdateTime(DateUtils.getNowDate());
updateEntity.setUpdateBy(currentUser.getUser().getNickName().toString());
updateEntity.setProcessStatus("1");
pmTechnologyPlanMapper.updatePmTechnologyPlan(updateEntity);
}
return toAjax(rows);
② 修改
int rows = pmTechnologyPlanService.updatePmTechnologyPlan(pmTechnologyPlan);
if(rows > 0 && pmTechnologyPlan.getUserList() !=null && pmTechnologyPlan.getUserList().size()>0){
//流程开启
LoginUser currentUser = SecurityUtils.getLoginUser();
Map<String, Object> variables =new HashMap<String, Object>();
//发起流程并越过发起人
List<ActIdUser> actIdUsers = new ArrayList<ActIdUser>();
for(SysUser sysUser:pmTechnologyPlan.getUserList()) {
ActIdUser actIdUser = new ActIdUser();
actIdUser.setId(sysUser.getUserName());
actIdUser.setFirst(sysUser.getNickName());
actIdUsers.add(actIdUser);
}
ProcessInstance processInstance = processService.submitApply(currentUser.getUser().getUserName().toString(),
pmTechnologyPlan.getTechnologyPlanId(),
pmTechnologyPlan.getItemName()+"-技术方案",
pmTechnologyPlan.getItemName()+"-技术方案",
ProcessConstants.PM_TECHNOLOGY_PLAN, variables,actIdUsers,true);
PmTechnologyPlan updateEntity = new PmTechnologyPlan();
updateEntity.setTechnologyPlanId(pmTechnologyPlan.getTechnologyPlanId());
updateEntity.setUpdateTime(DateUtils.getNowDate());
updateEntity.setUpdateBy(currentUser.getUser().getNickName().toString());
updateEntity.setProcessStatus("1");
pmTechnologyPlanMapper.updatePmTechnologyPlan(updateEntity);
}
return toAjax(rows);
(2)前端生成uuid
① 新增
//月度计划报表流程
int rows = pmBusinessMonthlyplanService.insertPmBusinessMonthlyplan(pmBusinessMonthlyplan);
if(rows > 0 && !pmBusinessMonthlyplan.getUserList().isEmpty()){
//流程开启
LoginUser currentUser = SecurityUtils.getLoginUser();
Map<String, Object> variables =new HashMap<String, Object>();
//发起流程并越过发起人
List<ActIdUser> actIdUsers = new ArrayList<ActIdUser>();
for(SysUser sysUser:pmBusinessMonthlyplan.getUserList()) {
ActIdUser actIdUser = new ActIdUser();
actIdUser.setId(sysUser.getUserName());
actIdUser.setFirst(sysUser.getNickName());
actIdUsers.add(actIdUser);
}
ProcessInstance processInstance = processService.submitApply(currentUser.getUser().getUserName().toString(),
pmBusinessMonthlyplan.getMonthlyplanId(),
pmBusinessMonthlyplan.getItemName()+"-项目月度计划报表",
pmBusinessMonthlyplan.getItemName()+"-项目月度计划报表",
ProcessConstants.BUSINESS_MONTHLYPLAN, variables,actIdUsers,true);
pmBusinessMonthlyplan.setUpdateTime(DateUtils.getNowDate());
pmBusinessMonthlyplan.setUpdateBy(currentUser.getUser().getNickName().toString());
pmBusinessMonthlyplan.setProcessStatus("1");
pmBusinessMonthlyplanMapper.updatePmBusinessMonthlyplan(pmBusinessMonthlyplan);
}
return toAjax(rows);
② 修改
//月度计划报表流程
int rows = pmBusinessMonthlyplanService.updatePmBusinessMonthlyplan(pmBusinessMonthlyplan);
if(rows > 0 && pmBusinessMonthlyplan.getUserList() !=null && pmBusinessMonthlyplan.getUserList().size()>0){
//流程开启
LoginUser currentUser = SecurityUtils.getLoginUser();
Map<String, Object> variables =new HashMap<String, Object>();
//发起流程并越过发起人
List<ActIdUser> actIdUsers = new ArrayList<ActIdUser>();
for(SysUser sysUser:pmBusinessMonthlyplan.getUserList()) {
ActIdUser actIdUser = new ActIdUser();
actIdUser.setId(sysUser.getUserName());
actIdUser.setFirst(sysUser.getNickName());
actIdUsers.add(actIdUser);
}
ProcessInstance processInstance = processService.submitApply(currentUser.getUser().getUserName().toString(),
pmBusinessMonthlyplan.getMonthlyplanId(),
pmBusinessMonthlyplan.getItemName()+"-项目月度计划报表",
pmBusinessMonthlyplan.getItemName()+"-项目月度计划报表",
ProcessConstants.BUSINESS_MONTHLYPLAN, variables,actIdUsers,true);
pmBusinessMonthlyplan.setUpdateTime(DateUtils.getNowDate());
pmBusinessMonthlyplan.setUpdateBy(currentUser.getUser().getNickName().toString());
pmBusinessMonthlyplan.setProcessStatus("1");
pmBusinessMonthlyplanMapper.updatePmBusinessMonthlyplan(pmBusinessMonthlyplan);
}
return toAjax(rows);
2.前端页面
<el-table-column label="流程状态" align="center" prop="processStatus" width="80">
<template slot-scope="scope">
<span v-html="getProcessName(scope.row.processStatus)"></span>
</template>
</el-table-column>
掉接口
import { getProcessName } from "@/utils/StatusName";
直接调用接口:
getProcessName,
18. 上传附件,带出附件上传的时间
核心代码: v-on:uploadTime="uploadTime"
uploadTime(val) {
this.form.时间字段名 = val;
},
//例如:
<el-form-item label="业主确认" prop="ownerConfirmFile">
<upload
:uploadData="
uploadFile(formDispatchInfo.dispatchId, 'ownerConfirmFile')
"
v-on:uploadTime="uploadTime"
></upload>
</el-form-item>
uploadTime(val) {
this.formDispatchInfo.ownerConfirmTime = val;
},
19. 审批流中,牵扯到的按钮操作
① 若只允许审批人查看,不允许操作功能按钮
1> 在功能按钮操作地方定义:
:disabled = "xxxxxView"
2> return里默认为false
xxxxxView:false,
3>流程中代码块
this.xxxView = true;
② 若某功能允许指定审批人操作,其他审批人只能查看
1> 在功能按钮操作地方定义
:disabled = "!xxxxxView"
2> return里默认为false
xxxxxView:false,
3>流程历史中
this.xxxView = true;
20. el-input框中内容居中
class="out-div"
<style lang="scss" scoped>
.out-div /deep/.el-input__inner{
text-align: center;
}
</style>
21. 禁用状态:readonly
22. 校验比例合计不能大于100
(1)data(){}外
watch: {
form: {
handler: function (val) {
//资金形式合计
this.form.totalZJ = Number(this.form.netSilver != undefined ? this.form.netSilver : 0)
+ Number(this.form.accept != undefined ? this.form.accept : 0)
+ Number(this.form.businessTicket != undefined ? this.form.businessTicket : 0)
+ Number(this.form.collateralProportion != undefined ? this.form.collateralProportion : 0);
},
deep: true,
},
},
(2)form中定义totalZJ
(3)按钮触发校验
//资金形式合计校验
if (Number(this.form.totalZJ) > Number(100)) {
this.$message.error("资金形式的付款比例总和不得大于100%");
return;
}
23. 表格固定列
fixed=“left”
24. 限制输入框只能输入数字,并且最大值是100
核心代码:class="inputNumerLeft" :controls="false" :max="100"
<el-col :span="24">
<el-form-item label="网银" prop="netSilver">
<el-input-number class="inputNumerLeft" :controls="false" :max="100" v-model="form.netSilver" placeholder="手动输入"/>
</el-form-item>
</el-col>
25. 流程中,点审批,存入手动录入的数据
流程组件中定义
@fatherMethod="fatherMethod"
@userFormSubmit="userFormSubmit"
:fatherMethodStatus="fatherMethodStatus"
① //父组件单独执行方法
fatherMethod(){
this.$refs.processTop.userVisible = true;
},
② // 选择审批人后点击审批
userFormSubmit(){
updateCmMaterialsContraAnalysis(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.$emit("closeView");
}
});
},
③ fatherMethodStatus:true,
26.动态新增,删除,带出来的数据不允许删除
:disabled="scope.row.remark" 删除操作按钮加禁用
postDataVo:[
不允许删除的固定值
],
//标准岗位不允许删除
this.列表.forEach(element => {
this.postDataVo.forEach(element1 => {
if(element.postName === element1){
element.remark = false
}else{
element.remark = true
}
});
});
27.poi模板导入数据,指定导入数据为负数时,显示红色
<el-table :cell-style="cellStyle"></el-table>
//表格自定义数据显示样式
cellStyle({row,column}) {
if(Number(row[column.property] ? row[column.property] .replace('%','') : 0) < 0 ){
return "color:red;"
}
},
28.表格指定列合计
<el-table :summary-method="getSummaries" show-summary>
</el-table>
//物料信息合计
getSummaries(param) {
const { columns, data } = param;
const sums = [];
columns.forEach((column, index) => {
if (index === 0) {
sums[index] = '合计';
return;
}
const values = data.map(item => Number(item[column.property]));
//需要合计的物料信息列
if (column.property == '指定列名') {
sums[index] = values.reduce((prev, curr) => {
const value = Number(curr);
if (!isNaN(value)) {
return prev + curr;
} else {
return prev;
}
}, 0);
}
});
return sums;
},
29.列表上方有选择按钮,点选择按钮,同时将选择的数据复制给下面列表
方式1:
buildTaskCloseDialog(data){
if(!this.form.buildTaskList){
this.form.buildTaskList = [];
}
data.forEach(element => {
//判断施工任务单不能重复
let a = this.form.buildTaskList.filter((item)=> item.taskId == element.id).length;
if(a == 0){
element.taskId = element.id;
this.form.buildTaskList.push(element);
}
});
this.$forceUpdate();
this.buildTaskOpen = false;
},
方式2:
buildTaskCloseDialog(data){
if (data instanceof Array) {
data.forEach((element) => {
let a = this.CmTenderMaterialsList.filter((item)=>item.mechanicalFacilityId == element.mechanicalId).length;
if(a == 0){
element.mechanicalFacilityId = element.mechanicalId;
element.materialCoding = element.mechanicalCode;
element.materialName = element.mechanicalName;
this.CmTenderMaterialsList.unshift(element);
}
});
this.$forceUpdate();
this.buildTaskOpen = false;
}
}
29.审批历史
①<el-button type="danger" icon="el-icon-s-check" size="mini" @click="buttonHistory">审批历史</el-button>
②<!-- 审批历史 -->
<div v-if="historyVisible">
<el-dialog v-dialogDrag :title="hisTitle" :modal-append-to-body="false" width="80%" :visible.sync="historyVisible" :close-on-click-modal="false">
<viewHistory :instanceId="form.表单id" ref="viewHistory"></viewHistory>
</el-dialog>
</div>
③//审批历史默认false
historyVisible:false,
④
components: {
viewHistory: () => import('@/components/process/viewHistory'),
}
⑤//审批历史
buttonHistory(){
this.historyVisible = true;
},
30.金额计算并且格式化(千位数金额格式化)
列表:
:formatter="xxxFormatter"
//引入工具类
import {formatMoney} from '@/utils/index'
repelMoneyFormatter(row){
var data1 = row.borrowMoney
var data2 = row.overdueMoney
var data3 = parseFloat(data1.split(",").join("")) - parseFloat(data2.split(",").join("")).toFixed(2);
return row.repelMoney = formatMoney(data3)
}
30…列表金额计算
注意:当前列表有需要计算的值
<template slot-scope="scope">
{{Number(scope.row.borrowMoney ||0) - Number(scope.row.overdueMoney ||0) }}
</template>
31.开始至结束时间范围条件过滤
(1)前端
① <el-form-item label="开始日期-结束日期" prop="collectionTime" label-width="100">
<el-date-picker v-model="queryParams.collectionTime"
type="daterange"
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
size="small"
value-format="yyyy-MM-dd"
@keyup.enter.native="handleQuery"
/>
</el-form-item>
② queryParams: {
beginTime:"",
endTime:"",
}
collectionTime:[],
④重置按钮置空
/** 重置按钮操作 */
resetQuery() {
this.collectionTime= [];
this.resetForm("queryForm");
this.handleQuery();
},
③ 调接口前处理开始时间,结束时间
this.queryParams.beginTime=this.collectionTime.length==2?this.collectionTime[0]:null,
this.queryParams.endTime=this.collectionTime.length==2?this.collectionTime[1]:null,
(2)后端sql
<if test="beginTime != null"> and pca.collection_time <![CDATA[ >= ]]> #{beginTime}</if>
<if test="endTime != null"> and pca.collection_time <![CDATA[ <= ]]> #{endTime}</if>
32.多个table页分成组件页面,实现切换不同table页,都调接口
多个table页拆分成组件页面,对应相同列表子页面,但过滤条件不同相关问题处理
父页面
核心代码:@tab-click="totalProjectPayClick"
<totalProjectPayList :itemStatus="itemStatus"></totalProjectPayList>
methods: {
totalProjectPayClick(val){
this.itemStatus = val.name;
}
}
<template>
<div class="app-container">
<template>
<el-tabs v-model="activeName" type="card" @tab-click="totalProjectPayClick">
<el-tab-pane label="汇总工程应收款明细页" name=""/>
<el-tab-pane label="在建项目" name="60"/>
<el-tab-pane label="已竣未结项目" name="70"/>
<el-tab-pane label="已竣已结项目" name="80"/>
</el-tabs>
<totalProjectPayList :itemStatus="itemStatus"></totalProjectPayList>
</template>
</div>
</template>
<script>
export default {
components:{
totalProjectPayList: () => import('@/views/analysisreport/independentInProjectPay/inProjectPayList'),
},
data() {
return {
activeName: '',
itemStatus:'',
};
},
created() {
},
methods: {
totalProjectPayClick(val){
this.itemStatus = val.name;
}
}
};
</script>
子页面
props:{
itemStatus:{
type: String,
},
},
watch:{
itemStatus(newValue, oldValue){
this.itemStatus = newValue;
this.getList();
}
},
调接口前赋值
this.queryParams.itemStatus = this.itemStatus;