安全积分超市对接

叶松

2023-11-27 170800582ce66c770a56e69f6d8b44c38f0728bf

 web/src/views/SecureManage/NipCheck/components/ScoreDetails.vue

@@ -2,36 +2,36 @@
  <div class="main" style="height:89%">
    <div class="main_header">
        <div class="header_item">
        <span class="header_label">类型：</span>
        <el-select v-model="search.type" clearable placeholder="请选择类型">
          <el-option
            v-for="item in typeLists"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="header_item">
        <span class="header_label">时间范围：</span>
        <el-date-picker
            v-model="search.time"
            type="daterange"
            value-format="yyyy-MM-dd HH:mm:ss"
            :default-time="['00:00:00','23:59:59']"
            range-separator="-"
            start-placeholder="起始时间"
            end-placeholder="结束时间">
        </el-date-picker>
      </div>
            <span class="header_label">人员类型：</span>
            <el-select v-model="search.userType" clearable placeholder="请选择人员类型" @change="changeType">
                <el-option
                    v-for="item in optionsType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="header_item">
            <span class="header_label">人员姓名：</span>
            <el-select v-model="search.userId" filterable clearable placeholder="请选择人员名称">
                <el-option
                    v-for="item in optionsUser"
                    :key="item.userId"
                    :label="item.realName"
                    :value="item.userId">
                </el-option>
            </el-select>
        </div>
        <div class="header_item">
            <span class="header_label">累计积分范围：</span>
            <el-input v-model="search.startIntegral" clearable placeholder="请输入"></el-input>
            <el-input v-model="search.endIntegra" style="margin-left:15px" clearable placeholder="请输入"></el-input>
        </div>
      <div class="header_item">
        <el-button icon="el-icon-search" v-if="showButton('search')" @click="searchButtonInfo(true)">查询</el-button>
        <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('export')" @click="exportFiles">导出Excel</el-button>
        <!-- <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('export')" @click="exportFiles">导出Excel</el-button> -->
      </div>
    </div>
    <div class="score_index">
        <div class="score_titles">积分:</div>
        <div class="score_datas"><span>65</span>分</div>
    </div>
    <div class="main_content">
      <el-table
@@ -44,10 +44,20 @@
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="时间" align="center" width="150"></el-table-column>
        <el-table-column prop="dangerLocation" label="积分分值" align="center" ></el-table-column>
        <el-table-column prop="dangerLocation" label="余额" align="center" ></el-table-column>
        <el-table-column prop="dangerLocation" label="类型" align="center" ></el-table-column>
        <el-table-column prop="title" label="说明" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column prop="realName" label="人员姓名" align="center" ></el-table-column>
        <el-table-column prop="accumulateIntegral" label="累计积分" align="center" ></el-table-column>
        <el-table-column prop="totalIntegral" label="当前积分" align="center" ></el-table-column>
        <el-table-column prop="totalConsumption" label="总消耗" align="center" ></el-table-column>
        <el-table-column prop="userType" label="人员类型" align="center" >
            <template #default="{row}">
                <div>{{optionsType[row.userType-1]&&optionsType[row.userType - 1].label}}</div>
            </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="{ row }">
            <el-button class="table_btn" size="mini" v-if="showButton('update')" @click="updateProp(row)">个人积分明细</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="main_footer">
@@ -62,27 +72,120 @@
        :total="total">
      </el-pagination>
    </div>
    <!-- 个人积分超市明细 -->
    <el-dialog
      class="prop_dialog"
      title="个人积分明细"
      :close-on-click-modal="false"
      :visible.sync="asyncVisible"
      width="65%">
      <div>
        <div class="main_header">
        <div class="header_item">
            <span class="header_label">类型：</span>
            <el-select v-model="searchForm.type" clearable placeholder="请选择类型">
                <el-option
                    v-for="item in optionsFormType"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
            </el-select>
        </div>
        <div class="header_item">
            <span class="header_label">时间范围：</span>
            <el-date-picker
                v-model="searchForm.time"
                type="daterange"
                value-format="yyyy-MM-dd HH:mm:ss"
                :default-time="['00:00:00','23:59:59']"
                range-separator="-"
                start-placeholder="起始时间"
                end-placeholder="结束时间">
            </el-date-picker>
    </div>
    <div class="header_item">
        <el-button icon="el-icon-search" v-if="showButton('search')" @click="searchFormButtonInfo(true,userIds)">查询</el-button>
        <el-button class="search_btn" icon="el-icon-plus" v-if="showButton('export')" @click="exportFiles">导出Excel</el-button>
    </div>
    </div>
    <div class="score_index">
        <div class="score_titles">积分:</div>
        <div class="score_datas"><span>{{ruleNumber}}</span>分</div>
    </div>
    <div class="main_content" style="height:350px">
        <el-table
            v-loading="loading"
            :data="dataFormList"
            height="100%">
            <el-table-column align="center" label="序号" width="60">
            <template #default="scope">
                <span>{{(pageNum - 1) * pageSize + scope.$index + 1}}</span>
            </template>
            </el-table-column>
            <el-table-column prop="createTime" label="时间" align="center" width="150"></el-table-column>
            <el-table-column prop="integralWater" label="积分分值" align="center" ></el-table-column>
            <el-table-column prop="balanc" label="余额" align="center" ></el-table-column>
            <el-table-column prop="type" label="类型" align="center" >
                <template #default="{row}">
                <div>{{optionsFormType[row.type-1]&&optionsFormType[row.type - 1].label}}</div>
            </template>
            </el-table-column>
            <el-table-column prop="remark" label="说明" align="center" show-overflow-tooltip></el-table-column>
        </el-table>
        </div>
        <div class="main_footer">
        <el-pagination
            background
            @current-change="changeFormPageNum"
            @size-change="changeFormPageSize"
            :current-page="pageFormNum"
            :page-sizes="[10, 20, 50, 100]"
            :page-size="pageFormSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalForm">
        </el-pagination>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { buttonPinia } from '../../../../pinia/index';
import { changeSize } from '../../../../plugins/public'; // 导入节流、动态切换组件尺寸方法
import { changeSize,downFiles } from '../../../../plugins/public'; // 导入节流、动态切换组件尺寸方法
  export default {
    data() {
      return {
        size: changeSize(), // 组件尺寸
        pageNum: 1,
        pageSize: 10,
        pageFormNum:1,
        pageFormSize:10,
        ruleNumber:null,//总积分数
        userIds:null,//人员id
        totalForm:0,
        search:{},//查询条件
        optionsUser:[],//人员
        searchForm:{},//弹框中的查询条件
        total: 0,
        disabled:false,
        loading: false,
        dataList: [], //积分明细信息列表
        dataFormList:[],//弹框中的列表
        imageList:[],
        asyncTitle: true, // 对话框title 新增：true  修改：false
        asyncVisible: false, // 添加 修改对话框
        typeLists:[
        optionsType:[
            {
                label:'管理人员',
                value:1
            },
            {
                label:'劳务人员',
                value:2
            },
        ],
        optionsFormType:[
            {
                label:'获取',
                value:1
@@ -91,7 +194,7 @@
                label:'消耗',
                value:2
            }
        ]
        ],
      }
    },
    watch: {
@@ -110,6 +213,17 @@
      }
    },
    methods: {
        //通过修改人员类型获取对应的人员名称
        changeType(val){
            this.$set(this.search,'userId','')
            this.$api.Engineer.getPersonsList({userType:val}).then(res=>{
                if(res.statusMsg === 'ok'){
                    this.optionsUser = res.data
                }else{
                    this.$message.warning(res.statusMsg)
                }
            })
        },
      // 查询按钮列表信息
      searchButtonInfo(bol) {
        if(bol) {
@@ -123,7 +237,7 @@
        params.endTime = this.search.time&&this.search.time[1]
        delete params.time
        this.loading = true;
        this.$api.Safety.searchHiddenLists(params).then((res) => {
        this.$api.Safety.searchIntegralLists(params).then((res) => {
          if(res.statusMsg === 'ok') {
            this.total = res.data.total;
            this.dataList = res.data.list;
@@ -131,8 +245,59 @@
          this.loading = false;
        })
      },
      //查询弹框中的列表
      searchFormButtonInfo(bol,userId){
        if(bol) {
          this.pageFormNum = 1;
        }
        let params = Object.assign({},this.searchForm,{
          pageNum: this.pageFormNum,
          pageSize: this.pageFormSize,
          userId:userId
        })
        params.startTime = this.searchForm.time&&this.searchForm.time[0]
        params.endTime = this.searchForm.time&&this.searchForm.time[1]
        delete params.time
        this.loading = true;
        this.$api.Safety.searchPersonLists(params).then((res) => {
          if(res.statusMsg === 'ok') {
            this.totalForm = res.data.data.total;
            this.ruleNumber = res.data.integral
            this.dataFormList = res.data.data.list;
          }
          this.loading = false;
        })
      },
      //导出excel
      exportFiles(){},
      exportFiles(){
        let params = {}
        params.startTime = this.search.time&&this.search.time[0]
        params.endTime = this.search.time&&this.search.time[1]
        delete params.time
        this.functionLoading();
        this.$api.Safety.exportMarketFiles(params).then(res => {
            downFiles(res, '积分明细信息', 'xls')
            this.loadingView.close()
        })
        .catch(() => {
            this.loadingView.close();
        })
      },
      // 转圈圈
      functionLoading() {
          this.loadingView = this.$loading({
              lock: true,
              text: '请稍后...',
              spinner: 'el-icon-loading',
              background: 'rgba(0, 0, 0, 0.7)'
          });
      },
      //个人积分明细弹框
      updateProp(row){
        this.userIds = row.userId
        this.asyncVisible = true;
        this.searchFormButtonInfo(true,row.userId)
      },
      // 判断按钮权限信息
      showButton(str) {
        const pinia = buttonPinia();
@@ -147,7 +312,17 @@
      changePageSize(size) {
        this.pageSize = size;
        this.searchButtonInfo();
      }
      },
      //切换弹框页数
      changeFormPageNum(page){
        this.pageFormNum = page;
        this.searchFormButtonInfo();
      },
      // 切换弹框每页条数
      changeFormPageSize(size) {
        this.pageFormSize = size;
        this.searchFormButtonInfo();
      },
    }
  }
</script>