开发笔记3

柚子Baby

已于 2022-07-22 10:04:23 修改

阅读量898

点赞数

分类专栏：笔记文章标签：前端 javascript html

于 2022-03-03 14:37:32 首次发布

本文链接：https://blog.csdn.net/QQ2691794543/article/details/123253228

版权

笔记专栏收录该内容

7 篇文章 0 订阅

订阅专栏

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;

柚子Baby

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
开发笔记3

1.控制流程再某个节点可以操作某个功能eg: 发起人-------所在公司总经理-------分公司行政---------结束流程再分公司行政节点时可以操作调拨按钮调查阅流程历史接口import {listHistory} from "@/api/activiti/process"流程中方法调接口 //流程历史 const queryParams = { pageNum: 1, pageSize: 10}; listHistory(this.pr
复制链接

扫一扫