storevisit-ui-mobile/src/views/signApproval/index.vue

<template>
  <div class="bgcolor">
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="流程审批" left-arrow @click-left="onClickLeft">
        <template #right>
          <!--        <span class="navRightBtn"  @click="editorFn">批量审批</span>-->
        </template>
      </van-nav-bar>
      <div class="serchInput">
        <van-cell
          class="monthNow selectcell"
          :title="companyName"
          is-link
          arrow-direction="down"
          @click="RegionShow = true" />
      </div>
      <div class="searchDiv">
        <van-search
          v-model="param"
          left-icon="search"
          show-action
          placeholder="搜索名称/编号/业务员">
          <template #action>
            <div @click="onSearchm">搜索</div>
          </template>
        </van-search>
      </div>
      <van-row>
        <van-col span="18">
          <van-tabs v-model="isHandle" color="#0057ba" @change="tabChange">
            <van-tab
              title="待审批"
              name="0"
              :disabled="disabled"
              v-if="userDeptLevel != '4'"></van-tab>
            <van-tab
              title="已审批"
              name="1"
              :disabled="disabled"
              v-if="userDeptLevel != '4'"></van-tab>
            <van-tab title="我发起的" name="2" :disabled="disabled"></van-tab>
          </van-tabs>
        </van-col>
        <van-col span="6" style="text-align: center; margin-top: 10px" @click="sortFN">
          <van-icon name="ascending" v-if="orderByStr == 'asc'" color="#0057ba" size="24" />
          <van-icon name="descending" v-if="orderByStr == 'desc'" color="#0057ba" size="24" />
        </van-col>
      </van-row>
    </div>
    <div class="container">
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="--已经到底了--"
        @load="onLoad">
        <van-checkbox-group v-model="radio">
          <div class="cellcontent brud weekList" v-for="(item, index) in list" :key="index">
            <van-cell is-link>
              <div class="cardContent" @click="approveFn(item)">
                <div class="title">
                  <p class="textLeft">{{ item.storeName }}({{ item.storeCode }})</p>
                  <p class="textRight" v-if="isHandle == 0">审批</p>
                </div>
                <div class="info">
                  类型：{{ selectDictLabel(storeTypeList, item.storeCategory) }}
                </div>
                <div class="info">地址：{{ item.addressLine }}</div>
                <div class="info">流程类型：{{ item.modelName }}</div>
                <div class="info">提交人：{{ item.applyUserName }}</div>
                <div class="info" v-if="item.isHandle == 0">
                  提交时间：{{ item.applyTime }}
                  <van-tag
                    plain
                    type="primary"
                    size="medium"
                    v-if="item.status == 1"
                    style="float: right"
                    >待审批</van-tag
                  >
                  <van-tag
                    plain
                    type="success"
                    size="medium"
                    v-if="item.status == 2"
                    style="float: right"
                    >审批通过</van-tag
                  >
                  <van-tag
                    plain
                    type="danger"
                    size="medium"
                    v-if="item.status == 3"
                    style="float: right"
                    >审批拒绝</van-tag
                  >
                </div>
                <div class="info" v-if="item.isHandle == 1">
                  审批时间：{{ item.todoTime }}
                  <van-tag
                    plain
                    type="primary"
                    size="medium"
                    v-if="item.status == 1"
                    style="float: right"
                    >待审批</van-tag
                  >
                  <van-tag
                    plain
                    type="success"
                    size="medium"
                    v-if="item.status == 2"
                    style="float: right"
                    >审批通过</van-tag
                  >
                  <van-tag
                    plain
                    type="danger"
                    size="medium"
                    v-if="item.status == 3"
                    style="float: right"
                    >审批拒绝</van-tag
                  >
                </div>
                <!--            <van-checkbox :name="item" v-if="isHandle=='0'"  shape="square" style="float: right"></van-checkbox>-->
              </div>
            </van-cell>
          </div>
        </van-checkbox-group>
        <van-empty description="" v-if="list.length == 0" />
      </van-list>
    </div>
    <van-popup v-model="submitShow" position="bottom" closeable :style="{ height: '50%' }">
      <div>
        <p
          style="
            text-align: center;
            padding-bottom: 16px;
            border-bottom: 1px solid #f5f5f5;
            font-size: 16px;
          ">
          审批意见
        </p>
        <van-field v-model="blackReason" rows="6" type="textarea" placeholder="请输入审批意见" />
        <br />
        <van-row gutter="20" style="padding: 10px">
          <van-col span="12">
            <van-button
              style="width: 100%"
              plain
              type="info"
              class="E-bgBlue BtnBorder"
              @click="outFn"
              >驳回</van-button
            >
          </van-col>
          <van-col span="12">
            <van-button style="width: 100%" plain type="info" class="E-bgBlue Btn" @click="submit"
              >同意</van-button
            >
          </van-col>
        </van-row>
      </div>
    </van-popup>
    <van-popup v-model="RegionShow" capture position="bottom">
      <van-picker
        show-toolbar
        :columns="moduleList"
        value-key="name"
        @confirm="onregionConfirm"
        @cancel="RegionShow = false" />
    </van-popup>
  </div>
</template>

<script>
import {
  getCWStoreTypeList,
  getTodoItemList,
  completeAll,
  getStoreTypeList,
  getTodoItemMyList,
} from '@/api/index';
import { moduleList } from '@/api/inventory';
export default {
  name: 'MyHistoricalWeekly',
  data() {
    return {
      isHandle: '0',
      disabled: false,
      pageNum: 1,
      pageSize: 10,
      loading: false,
      finished: false,
      RegionShow: false,
      storeTypeList: [],
      list: [],
      radio: [],
      blackReason: '',
      param: '',
      submitShow: false,
      orderByStr: 'desc',
      moduleList: [],
      module: '',
      companyName: '全部流程',
      userDeptLevel: '',
    };
  },
  created() {
    // userDeptLevel用户部门等级字段，0-总部，1-公司，2-大区，3-销售部，4-业务员
    this.userDeptLevel = localStorage.getItem('userDeptLevel');
    if (this.userDeptLevel == '4') {
      this.isHandle = '2';
    }
    this.radio = [];
    getStoreTypeList({}).then((res) => {
      this.storeTypeList = res.data;
    });
    moduleList({}).then((res) => {
      var moduleList = [{ key: '', name: '全部流程' }];
      this.moduleList = moduleList.concat(res.rows);
    });
    // this.approveList()
  },
  watch: {
    $route(to, from) {
      this.powerGrade = localStorage.getItem('powerGrade');
      this.pageNum = 1;
      this.radio = [];
      if (to.path == '/signApprovalList' && from.path == '/home') {
        window.scrollTo(0, 0);
        this.approveList();
      }
      if (to.path == '/signApprovalList' && from.path == '/signApproval') {
        this.pageNum = 1;
        this.tabChange();
      }
    },
  },
  methods: {
    onregionConfirm(val) {
      this.module = val.key;
      this.companyName = val.name;
      this.RegionShow = false;
    },
    sortFN() {
      if (this.orderByStr == 'asc') {
        this.orderByStr = 'desc';
      } else {
        this.orderByStr = 'asc';
      }
      this.tabChange();
    },
    editorFn() {
      if (this.radio.length == 0) {
        this.$toast('请选择审批项！');
        return;
      }
      this.blackReason = '';
      this.submitShow = true;
    },
    outFn() {
      if (this.blackReason.trim() == '') {
        this.$toast('请输入审批意见！');
        return;
      }
      var taskIds = [];
      var instanceIds = [];
      for (var i = 0; i < this.radio.length; i++) {
        taskIds.push(this.radio[i].taskId);
        instanceIds.push(this.radio[i].instanceId);
      }
      var dormData = {
        taskIds: taskIds.join(','),
        instanceIds: instanceIds.join(','),
        variables: JSON.stringify({
          comment: this.blackReason,
          pass: false,
        }),
      };
      this.$dialog
        .confirm({
          message: '确认提交审批？',
        })
        .then(() => {
          completeAll(dormData).then((res) => {
            if (res.code == 200) {
              this.submitShow = false;
              this.radio = [];
              this.$toast('驳回成功！');
              this.pageNum = 1;
              this.approveList();
            } else {
              this.$toast(res.msg);
            }
          });
        });
    },
    submit() {
      var taskIds = [];
      var instanceIds = [];
      for (var i = 0; i < this.radio.length; i++) {
        taskIds.push(this.radio[i].taskId);
        instanceIds.push(this.radio[i].instanceId);
      }
      var dormData = {
        taskIds: taskIds.join(','),
        instanceIds: instanceIds.join(','),
        variables: JSON.stringify({
          comment: this.blackReason,
          pass: true,
        }),
      };
      this.$dialog
        .confirm({
          message: '确认提交审批？',
        })
        .then(() => {
          completeAll(dormData).then((res) => {
            if (res.code == 200) {
              this.radio = [];
              this.$toast('提交成功！');
              this.submitShow = false;
              this.pageNum = 1;
              this.approveList();
            } else {
              this.$toast(res.msg);
            }
          });
        });
    },
    onLoad() {
      this.disabled = true;
      if (this.isHandle == 2) {
        this.approveMyList();
      } else {
        this.approveList();
      }
    },
    onSearchm() {
      this.tabChange();
    },
    approveFn(row) {
      this.list = [];
      this.$router.push({
        path: '/signApproval',
        query: {
          signId: row.signId,
          addressLine: row.addressLine,
          type: this.isHandle,
          itemType: row.itemType,
          taskId: row.taskId,
          instanceId: row.instanceId,
          visitsId: row.visitsId,
        },
      });
    },
    tabChange() {
      window.scrollTo(0, 0);
      this.disabled = true;
      this.list = [];
      this.pageNum = 1;
      if (this.isHandle == 2) {
        this.approveMyList();
      } else {
        this.approveList();
      }
    },
    approveMyList() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据加载中...',
        forbidClick: true,
      });
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      getTodoItemMyList({
        pageNum: this.pageNum,
        module: this.module,
        pageSize: this.pageSize,
        param: this.param,
        orderByStr: this.orderByStr,
      }).then((res) => {
        loading1.clear();
        this.disabled = false;
        this.loading = false;
        if (this.pageNum == 1) {
          this.list = [];
          this.refreshing = false;
        }
        this.list = this.list.concat(res.rows);
        if (this.list.length >= res.total) {
          this.finished = true;
        } else {
          this.finished = false;
        }
        this.pageNum = this.pageNum + 1;
      });
    },
    approveList() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据加载中...',
        forbidClick: true,
      });
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      getTodoItemList({
        isHandle: this.isHandle,
        module: this.module,
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        param: this.param,
        orderByStr: this.orderByStr,
      }).then((res) => {
        loading1.clear();
        this.disabled = false;
        this.loading = false;
        if (this.pageNum == 1) {
          this.list = [];
          this.refreshing = false;
        }
        this.list = this.list.concat(res.rows);
        if (this.list.length >= res.total) {
          this.finished = true;
        } else {
          this.finished = false;
        }
        this.pageNum = this.pageNum + 1;
      });
    },
    onClickLeft() {
      this.$router.push('/home');
    },
  },
};
</script>
<style lang="scss" scoped>
.bgcolor {
  background-color: #f5f5f5;
}
.serchInput {
  padding: 0 14px;
  margin-top: 14px;
}

.monthNow {
  height: 34px;
  line-height: 34px;
  text-align: left;
  font-weight: bold;
  padding: 0 16px;
  box-sizing: border-box;
  background-color: #f1f1f1;
  border-radius: 20px;
  border: 1px solid #ccc;
  position: relative;
  color: #333;
  font-size: 14px;
  .van-cell__left-icon,
  .van-cell__right-icon {
    line-height: 34px;
  }
  .CalendarIcon {
    float: right;
    font-size: 24px;
    color: #1989fa;
    margin-top: 6px;
    position: absolute;
    right: 12px;
    img {
      height: 0.8em;
    }
  }
}
.monthNowpro {
  color: #ccc;
}
.cardContent {
  box-sizing: border-box;
}

.cardContent .title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 14px;
}

.cardContent .info {
  font-size: 14px;
  color: #999;
  line-height: 26px;
}

.cardContent .title p {
  padding: 0;
  margin: 0;
}

.cardContent .title .textLeft {
  display: inline-block;
  padding-bottom: 10px;
}

.cardContent .title .textRight {
  float: right;
  color: #0057ba;
}

.van-tab--active {
  color: #0057ba;
}

.brud {
  margin: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.weekList {
  border-radius: 0;
}
.Btn {
  margin: 0 auto 10px;
  display: block;
  width: 90%;
  border-radius: 5px;
  color: #fff !important;
  background-color: #0057ba;
  border: 1px solid #0057ba;
  height: 36px;
}
.BtnBorder {
  margin: 0 auto 10px;
  display: block;
  width: 90%;
  border-radius: 5px;
  border: 1px solid #0057ba;
  color: #0057ba;
  height: 36px;
}
.weekList .van-cell {
  border-radius: 6px;
  overflow: hidden;
}
.weekList .cardContent .title {
  line-height: 32px;
}
.weekList .van-cell__right-icon {
  top: 4px;
}
.searchDiv {
  .van-search {
    background: #fff;
  }
  .van-search__action {
    font-size: 14px;
    color: #0057ba;
    font-weight: bold;
    background: #f1f1f1;
    border-bottom-right-radius: 60px;
    border-top-right-radius: 60px;
    border: 1px solid #ccc;
    padding: 0 20px;
  }
  .van-search--show-action {
    padding-right: 12px;
  }
  .van-search__content {
    border: 1px solid #ccc;
    border-bottom-left-radius: 60px;
    border-top-left-radius: 60px;
    background: #f1f1f1;
    border-right: 0;
  }
}
</style>