123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601 |
- <template>
- <div>
- <div>
- <div ref="print" v-if="isPrint">
- <div v-for="(item,index) in selectionItems" :key="item.id" style="width: 100%;height: 100%;">
- <div :style="{width:printW+'cm',height:printH+'cm'}" style="position: relative;">
-
-
- <template v-for="item in inputs">
- <div class="input-item" :style="{left:item.x+'cm',top:item.y+'cm',width:item.w? item.w+'cm':'auto'}" style="z-index: 2;height: 2.33rem;">
- {{item.name}}
- </div>
- </template>
-
- </div>
- </div>
- </div>
- </div>
- <div class="all padding-20">
- <el-form :inline="true" label-width="60px">
- <el-form-item label="时间">
- <el-date-picker
- size="medium"
- v-model="formData.time_range"
- type="daterange"
- value-format="yyyy-MM-dd"
- range-separator="至"
- :clearable="false"
- start-placeholder="开始日期"
- end-placeholder="结束日期"
- :picker-options="instantPickerOptions"
- ></el-date-picker>
- </el-form-item>
- <el-form-item label="部门">
- <el-cascader
- size="medium"
- v-model="dept_name"
- :options="dept_tree"
- :props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
- ref="dept"
- clearable
- filterable
- placeholder="全公司"
- ></el-cascader>
- </el-form-item>
- <el-form-item label="人员">
- <el-select style="width: 300px;" size="medium" multiple v-model="employeeId" placeholder="请输入或选择人员">
- <el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
- </el-select>
- </el-form-item>
- </el-form>
- <div class="flex-box-end">
- <el-button size="small" @click="dialogVisible=true" plain type="primary">打印配置</el-button>
- <el-button size="small" type="primary" @click="printFn">打印</el-button>
- </div>
- <el-table :data="list" style="width: 100%;cursor: pointer;" v-loading="loading" @selection-change="deleteEvents">
- <el-table-column width="50" type="selection"></el-table-column>
- <el-table-column label="姓名" align="left">
- <template slot-scope="scope">
- <div class="flex-box">
- <userImage :user_name="scope.row.employee_name" :img_url="scope.row.employee_img_url" width="50px" height="50px"></userImage>
- <span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee_name }}</span>
- </div>
- </template>
- </el-table-column>
- <el-table-column show-overflow-tooltip label="部门" align="left" min-width="120px" prop="deptName"></el-table-column>
- <el-table-column label="奖票事件" align="left" prop="point"></el-table-column>
- <el-table-column label="积分" align="left" prop="point"></el-table-column>
- <el-table-column label="奖票时间" align="left" prop="point"></el-table-column>
- <el-table-column label="发放人" align="left" prop="point"></el-table-column>
- <el-table-column label="状态">
- <template slot-scope="scope">
- <span class="blue" style="cursor: pointer;">查看详情</span>
- </template>
- </el-table-column>
- <template slot="empty">
- <div class="nopoint_box">
- <div class="noimg noperson"></div>
- <span class="title">没有对应的数据</span>
- </div>
- </template>
- </el-table>
- <center style="padding: 20px 0;">
- <el-pagination
- background
- @size-change="handleSizeChange"
- @current-change="handleCurrentChange"
- :current-page="page"
- :page-sizes="[10, 20, 50, 100]"
- layout="total, sizes, prev, pager, next"
- :page-size="page_size"
- :total="total"
- ></el-pagination>
- </center>
- </div>
- <!-- 打印配置 -->
- <el-dialog title="打印配置" :visible.sync="dialogVisible" width="900px">
- <div class="flex-box-ce">
- <div class="flex-box-ce flex-1">
- <div class="input-item" :class="selectInput.id==item.id? 'activeInput':''" @click="selectInput=item" style="margin-right: 10px;position: relative;" v-for="item in inputs" :key="item.id">{{item.name}}</div>
- </div>
- <div class="flex-box-ce">
- <div class="flex-box-ce">
- <div class="label">奖票宽</div>
- <el-input style="width: 60px;" size="small" v-model="printW" @input="[checkCountry($event, 1),(printW = printW.match(/\d+(\.\d{0,1})?/) ? printW.match(/\d+(\.\d{0,1})?/)[0] : '')]"></el-input>
- <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
- </div>
- <div class="flex-box-ce" style="margin-left: 30px;">
- <div class="label">奖票高</div>
- <el-input style="width: 60px;" size="small" v-model="printH" @input="[checkCountry($event, 2),(printH = printH.match(/\d+(\.\d{0,1})?/) ? printH.match(/\d+(\.\d{0,1})?/)[0] : '')]"></el-input>
- <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
- </div>
- </div>
- </div>
- <div class="flex-box-ce" style="margin: 20px 0;">
- <div class="flex-box-ce">
- <div class="label">X</div>
- <el-input style="width: 60px;" size="small" v-model.number="selectInput.x" @input="[checkCountry($event, 3),(selectInput.x = selectInput.x.match(/\d+(\.\d{0,1})?/) ? selectInput.x.match(/\d+(\.\d{0,1})?/)[0] : '')]"></el-input>
- <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
- </div>
- <div class="flex-box-ce" style="margin-left: 20px;">
- <div class="label">Y</div>
- <el-input style="width: 60px;" size="small" v-model="selectInput.y" @input="[checkCountry($event, 4),(selectInput.y = selectInput.y.match(/\d+(\.\d{0,1})?/) ? selectInput.y.match(/\d+(\.\d{0,1})?/)[0] : '')]"></el-input>
- <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
- </div>
- <div class="flex-box-ce" style="margin-left: 20px;" v-if="selectInput.id==2">
- <div class="label">宽</div>
- <el-input style="width: 60px;" size="small" v-model="selectInput.w" @input="[checkCountry($event, 5),(selectInput.w = selectInput.w.match(/\d+(\.\d{0,1})?/) ? selectInput.w.match(/\d+(\.\d{0,1})?/)[0] : '')]"></el-input>
- <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
- </div>
- <div class="flex-1"></div>
- <el-popover placement="top-end" width="800" trigger="hover">
- <div><img src="@/assets/image/321.jpg" style="width: 100%;"/></div>
- <div class="blue cursor" slot="reference">检查单示例</div>
- </el-popover>
-
- </div>
- <div style="width: 100%;height: 10cm;background-color: #f1f1f1;position: relative;">
- <div :style="{width:printW+'cm',height:printH+'cm'}" style="position:relative;background-color: #fff;margin: 0 auto;top: 50%;transform: translate(0, -50%);">
- <template v-for="item in inputs">
- <div class="input-item" style="height: 2.33rem;" v-if="item.id==2" :class="{activeInput:item.id==selectInput.id}" :style="{left:item.x+'cm',top:item.y+'cm',width:item.w? item.w+'cm':'auto'}">
- {{item.name}}
- </div>
- <div v-else class="input-item" :class="{activeInput:item.id==selectInput.id}" :style="{left:item.x+'cm',top:item.y+'cm',width:item.w? item.w+'cm':'auto'}">
- {{item.name}}
- </div>
- </template>
- </div>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
- <el-button type="primary" @click="sumbit" size="medium">保 持</el-button>
- </span>
- </el-dialog>
-
- <el-dialog @close="closeCode" :visible.sync="innerVisible" width="444px">
- <div style="border-radius: 15px;border: 1px solid #f1f1f1;padding: 10px; width: 346px;box-sizing: border-box;margin: 0 auto;">
- <div id="qrcode" ref="qrcode"></div>
- </div>
- <div style="margin-top: 10px;text-align: center;color: #666;">请使用钉钉APP扫描二维码</div>
- </el-dialog>
- </div>
- </template>
- <script>
- import moment from 'moment';
- import QRCode from 'qrcodejs2';
- export default {
- data() {
- return {
- instantPickerOptions: {
- shortcuts: [
- {
- text: '今天',
- onClick(picker) {
- const now = new Date(new Date().toLocaleDateString());
- const start = now.getTime();
- picker.$emit('pick', [moment(start).format('YYYY-MM-DD'), moment(start).format('YYYY-MM-DD')]);
- }
- },
- {
- text: '昨天',
- onClick(picker) {
- const now = new Date(new Date().toLocaleDateString());
- const start = now.getTime() - 60 * 60 * 24 * 1000;
- picker.$emit('pick', [moment(start).format('YYYY-MM-DD'),moment(start).format('YYYY-MM-DD')]);
- }
- },
- {
- text: '本周',
- onClick(picker) {
- const now = new Date(new Date().toLocaleDateString());
- const start = now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000;
- const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
- picker.$emit('pick', [moment(start).format('YYYY-MM-DD'), moment(end).format('YYYY-MM-DD')]);
- }
- },
- {
- text: '上周',
- onClick(picker) {
- const now = new Date(new Date().toLocaleDateString());
- const start = now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000;
- const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
- picker.$emit('pick', [moment(start).format('YYYY-MM-DD'), moment(end).format('YYYY-MM-DD')]);
- }
- },
- {
- text: '本月',
- onClick(picker) {
- const now = new Date();
- const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
- const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
- picker.$emit('pick', [moment(startDate.getTime()).format('YYYY-MM-DD'), moment(endDate.getTime()).format('YYYY-MM-DD')]);
- }
- },
- {
- text: '上月',
- onClick(picker) {
- const now = new Date();
- const startDate = new Date(now.getFullYear() - (now.getMonth() > 0 ? 0 : 1), (now.getMonth() + 11) % 12, 1);
- const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
- picker.$emit('pick', [moment(startDate.getTime()).format('YYYY-MM-DD'), moment(endDate.getTime()).format('YYYY-MM-DD')]);
- }
- },
- {
- text: '本季',
- onClick(picker) {
- const quarter=Math.ceil((new Date().getMonth()+1)/3)
- let str=moment().format(`YYYY-${(quarter-1)*3+1}-01`);
- let ent=moment(moment().format(`YYYY-${(quarter-1)*3+1}-01`)).add(2,`month`).endOf('month').format("YYYY-MM-DD");
- console.log(str,ent)
- picker.$emit('pick',[str,ent]);
- }
- },
- {
- text: '本年',
- onClick(picker) {
- let year=moment().format('YYYY');
- picker.$emit('pick', [year+'-01-01',year+'-12-31']);
- }
- },
- ],
- onPick: (obj) => {
- if(!this.dialogVisible){
- this.pickerMinDate = new Date(obj.minDate).getTime();
- }
- },
- disabledDate : time => {
- if (this.pickerMinDate && !this.dialogVisible) {
- const day1 = 30 * 24 * 3600 * 1000//限制只能选一个月的范围区间
- let maxTime = this.pickerMinDate + day1
- let minTime = this.pickerMinDate - day1
- return time.getTime() > maxTime || time.getTime()<minTime
- }
- }
- },
- total:0,
- page: 1,
- page_size: 10,
- formData: {
- dept_id: '0',
- time_range: []
- },
- dept_name: [],
- dept_tree: [],
- loading: false,
- list:[],
- employee_map: this.$getCache('SET_EMPLOYEE_MAP'),
- employeeId:[],
- dialogVisible:false,
- printW:18,
- printH:7.5,
- inputs:{
- name:{name:'姓名',x:1,y:1.4,w:0,id:1},
- event:{name:'奖票事件',x:1,y:2.4,w:15,id:2},
- point:{name:'积分分值',x:1,y:3.9,w:0,id:3},
- name2:{name:'发放人',x:15,y:4.9,w:0,id:4},
- date:{name:'奖票日期',x:15,y:5.9,w:0,id:5},
- },
- selectInput:{name:'姓名',x:1,y:1.4,w:0,id:1},
- innerVisible:false,
- selectionItems:[1,2,3,4,5,6],
- isPrint:false,
- };
- },
- watch: {
- 'formData.time_range'(){
- this.selectBtn();
- },
- dept_name(val) {
- if (val.length !== 0) {
- this.formData.dept_id = val[val.length - 1];
- } else {
- this.formData.dept_id = 0;
- }
- this.employeeId=[];
- this.$nextTick(() => {
- this.$refs.dept.dropDownVisible = false;
- this.getEmployeeList();
- this.selectBtn();
- });
- },
- },
- methods: {
- printFn() {
- //传入dom结构即可
- this.isPrint=true;
- this.$nextTick(()=>{
- this.$print(this.$refs.print);
- this.isPrint=false;
- })
- },
- ruleQRcode() {
- this.innerVisible = true;
- // 使用$nextTick确保数据渲染
- this.$nextTick(() => {
- this.payOrder();
- });
- },
- payOrder () {// 展示二维码
- let url = 'dingtalk://dingtalkclient/action/open_micro_app'
- let appid = '?appId='+this.$appId
- let corpId = '&corpId='+this.$getCache('corpId')
- let page = '&page='+encodeURIComponent(`pages/reportBox/report/report?employee_id=${encodeURIComponent(this.$getUserData().id)}`)//encodeURIComponent('小米')
- let urls = url+appid+corpId+page
- var qrcode = new QRCode('qrcode', {
- text: urls, // 二维码内容
- width: 325,
- height: 325,
- render: 'table', // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
- colorDark: '#34373e', // 二维码色
- colorLight: '#ffffff', // 背景色
- correctLevel: QRCode.CorrectLevel.H // 容错等级,H是heigh,最高,所以二维码看起来很密
- })
- },
- // 关闭弹框,清除已经生成的二维码
- closeCode() {
- setTimeout(() => {
- this.$refs.qrcode.innerHTML = '';
- }, 150);
- },
- checkCountry(e,index) {
- if(index==1){
- if(this.printW > 22){
- this.printW='22';
- }
- }
- if(index==2){
- if(this.printH > 9){
- this.printH='9';
- }
- }
- },
- deleteEvents(selection) {
- this.selectionItems = selection;
- this.selectionID = selection.map(item => {
- return item.id;
- });
- },
- selectBtn(){
- this.page=1;
- this.get_list();
- },
- getEmployeeList() {
- this.$axios('get', '/api/employee/list', { dept_id: this.formData.dept_id }).then(res => {
- this.employee_map = res.data.data.list;
- });
- },
- sumbit(){
-
- },
- //请求数据
- get_list() {
- let data={
- page:this.page,
- page_size:this.page_size
- };
- this.loading = true;
- this.$axios('get', '/api/integral/statistics/ranking', data, 'v2').then(res => {
- this.labelName = this.formData.pt_id == 2 ? 'A分' : 'B分';
- if (res.data.code == 1) {
- this.list =this.$returnDeptName(res.data.data.list);
- this.total = res.data.data.total;
- } else {
- this.$message.error(res.data.data.msg);
- }
- })
- .finally(() => {
- this.loading = false;
- });
- },
- //获取部门
- getDepartment() {
- this.$axios('get', '/api/department/tree').then(res => {
- this.dept_tree = this.getTreeData(res.data.data.list);
- });
- },
- // 递归判断列表,把最后的children设为undefined
- getTreeData(data) {
- for (var i = 0; i < data.length; i++) {
- data[i].obj = { id: data[i].id, name: data[i].name };
- if (data[i]._child.length < 1) {
- // children若为空数组,则将children设为undefined
- data[i]._child = undefined;
- } else {
- // children若不为空数组,则继续 递归调用 本方法
- this.getTreeData(data[i]._child);
- }
- }
- return data;
- },
- // 页面变更
- handleCurrentChange(val) {
- this.page = val;
- this.get_list();
- },
- handleSizeChange(val) {
- this.page = 1;
- this.page_size = val;
- this.get_list();
- },
- },
- created() {
- if(this.$getToken()){
- this.getEmployeeList();
- this.getDepartment();
- }else{
- this.innerVisible=true;
- }
- },
- mounted() {
-
-
- }
- };
- </script>
- <style scoped lang="scss">
- .print_img{
- width: 20cm;
- height: 10cm;
- text-align: center;
- border: 1px solid #000;
- z-index: 9;
- }
- .print-box{
- margin: auto;
- background-color: #fff;
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- }
- .input-item{
- background: #f4f4f5;
- border-radius: 4px;
- padding:6px 10px;
- cursor: pointer;
- color: #909399;
- position: absolute;
- }
- .activeInput{
- background-color: #ECF5FF;
- color: #26a2ff;
- }
- .label{
- text-align: right;
- vertical-align: middle;
- float: left;
- font-size: 14px;
- color: #606266;
- line-height: 40px;
- padding: 0 12px 0 0;
- box-sizing: border-box;
- font-weight: 600;
- }
- .search_box {
- ::v-deep button:active {
- background: #26a2ff;
- }
- ::v-deep button:active .el-icon-search {
- color: #fff;
- }
- }
- .date-picker-width {
- width: 100% !important;
- }
- .nopoint_box {
- display: inline-block;
- text-align: center;
- width: 100%;
- margin-bottom: 10px;
- }
- .noimg {
- display: inline-block;
- width: 110px;
- height: 110px;
- margin: 22px auto 16px;
- /* background:url("/static/images/nodata_default.png") no-repeat center; */
- background-size: 99%;
- }
- .noperson {
- display: inline-block;
- width: 110px;
- height: 110px;
- line-height: none;
- margin: 22px auto 16px;
- background: url('/static/images/noperson_default.png') no-repeat center;
- background-size: 99%;
- }
- .title {
- display: block;
- text-align: center;
- font-size: 12px !important;
- line-height: 30px;
- color: #909399 !important;
- padding: 0;
- }
- .nopoint_box a {
- color: #26a2ff;
- }
- .chart_content {
- .chart-legend__wrap {
- text-align: right;
- padding: 20px;
- padding-right: 50px;
- & .chart-legend__pink {
- position: relative;
- padding-left: 12px;
- padding-right: 5px;
- &:after {
- content: '';
- position: absolute;
- margin-top: -2px;
- top: 35%;
- left: 0;
- width: 8px;
- height: 8px;
- background: #f56c6c;
- border-radius: 100%;
- }
- }
- & .chart-legend__green {
- position: relative;
- padding-left: 12px;
- &:after {
- content: '';
- position: absolute;
- margin-top: -2px;
- top: 35%;
- left: 0;
- width: 8px;
- height: 8px;
- background: #53b87f;
- border-radius: 100%;
- }
- }
- }
- }
- .drawer_title {
- font-size: 18px;
- padding: 20px;
- }
- .manager_statistics_box {
- background-color: #ffffff;
- padding: 20px;
- min-height: calc(100vh - 160px);
- ::v-deep .el-row .el-checkbox .el-checkbox__label {
- line-height: 20px;
- }
- }
- .diy_tip_bg {
- background: #f5f6f9;
- overflow: hidden;
- .diy-tip {
- margin-bottom: 15px;
- border: 1px solid #67c23a;
- padding: 20px 16px;
- p {
- color: #67c23a !important;
- font-size: 14px;
- margin: 0 !important;
- padding: 4px 0;
- }
- }
- }
- ::v-deep .el-dialog {
- // top: 21%;
- }
- .picker_er {
- margin-top: 20px;
- }
- .el-range-editor--medium.el-input__inner {
- width: 280px;
- }
- ::v-deep .el-cascader .el-input .el-input__inner {
- width: 150px;
- }
- .el-checkbox.is-bordered.el-checkbox--medium {
- padding: 9px 20px 7px 10px;
- }
- </style>
|