print.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601
  1. <template>
  2. <div>
  3. <div>
  4. <div ref="print" v-if="isPrint">
  5. <div v-for="(item,index) in selectionItems" :key="item.id" style="width: 100%;height: 100%;">
  6. <div :style="{width:printW+'cm',height:printH+'cm'}" style="position: relative;">
  7. <template v-for="item in inputs">
  8. <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;">
  9. {{item.name}}
  10. </div>
  11. </template>
  12. </div>
  13. </div>
  14. </div>
  15. </div>
  16. <div class="all padding-20">
  17. <el-form :inline="true" label-width="60px">
  18. <el-form-item label="时间">
  19. <el-date-picker
  20. size="medium"
  21. v-model="formData.time_range"
  22. type="daterange"
  23. value-format="yyyy-MM-dd"
  24. range-separator="至"
  25. :clearable="false"
  26. start-placeholder="开始日期"
  27. end-placeholder="结束日期"
  28. :picker-options="instantPickerOptions"
  29. ></el-date-picker>
  30. </el-form-item>
  31. <el-form-item label="部门">
  32. <el-cascader
  33. size="medium"
  34. v-model="dept_name"
  35. :options="dept_tree"
  36. :props="{ checkStrictly: true, value: 'id', label: 'name', children: '_child' }"
  37. ref="dept"
  38. clearable
  39. filterable
  40. placeholder="全公司"
  41. ></el-cascader>
  42. </el-form-item>
  43. <el-form-item label="人员">
  44. <el-select style="width: 300px;" size="medium" multiple v-model="employeeId" placeholder="请输入或选择人员">
  45. <el-option v-for="item in employee_map" :key="item.id" :label="item.name" :value="item.id"></el-option>
  46. </el-select>
  47. </el-form-item>
  48. </el-form>
  49. <div class="flex-box-end">
  50. <el-button size="small" @click="dialogVisible=true" plain type="primary">打印配置</el-button>
  51. <el-button size="small" type="primary" @click="printFn">打印</el-button>
  52. </div>
  53. <el-table :data="list" style="width: 100%;cursor: pointer;" v-loading="loading" @selection-change="deleteEvents">
  54. <el-table-column width="50" type="selection"></el-table-column>
  55. <el-table-column label="姓名" align="left">
  56. <template slot-scope="scope">
  57. <div class="flex-box">
  58. <userImage :user_name="scope.row.employee_name" :img_url="scope.row.employee_img_url" width="50px" height="50px"></userImage>
  59. <span style="line-height: 50px; padding-left: 10px;">{{ scope.row.employee_name }}</span>
  60. </div>
  61. </template>
  62. </el-table-column>
  63. <el-table-column show-overflow-tooltip label="部门" align="left" min-width="120px" prop="deptName"></el-table-column>
  64. <el-table-column label="奖票事件" align="left" prop="point"></el-table-column>
  65. <el-table-column label="积分" align="left" prop="point"></el-table-column>
  66. <el-table-column label="奖票时间" align="left" prop="point"></el-table-column>
  67. <el-table-column label="发放人" align="left" prop="point"></el-table-column>
  68. <el-table-column label="状态">
  69. <template slot-scope="scope">
  70. <span class="blue" style="cursor: pointer;">查看详情</span>
  71. </template>
  72. </el-table-column>
  73. <template slot="empty">
  74. <div class="nopoint_box">
  75. <div class="noimg noperson"></div>
  76. <span class="title">没有对应的数据</span>
  77. </div>
  78. </template>
  79. </el-table>
  80. <center style="padding: 20px 0;">
  81. <el-pagination
  82. background
  83. @size-change="handleSizeChange"
  84. @current-change="handleCurrentChange"
  85. :current-page="page"
  86. :page-sizes="[10, 20, 50, 100]"
  87. layout="total, sizes, prev, pager, next"
  88. :page-size="page_size"
  89. :total="total"
  90. ></el-pagination>
  91. </center>
  92. </div>
  93. <!-- 打印配置 -->
  94. <el-dialog title="打印配置" :visible.sync="dialogVisible" width="900px">
  95. <div class="flex-box-ce">
  96. <div class="flex-box-ce flex-1">
  97. <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>
  98. </div>
  99. <div class="flex-box-ce">
  100. <div class="flex-box-ce">
  101. <div class="label">奖票宽</div>
  102. <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>
  103. <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
  104. </div>
  105. <div class="flex-box-ce" style="margin-left: 30px;">
  106. <div class="label">奖票高</div>
  107. <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>
  108. <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
  109. </div>
  110. </div>
  111. </div>
  112. <div class="flex-box-ce" style="margin: 20px 0;">
  113. <div class="flex-box-ce">
  114. <div class="label">X</div>
  115. <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>
  116. <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
  117. </div>
  118. <div class="flex-box-ce" style="margin-left: 20px;">
  119. <div class="label">Y</div>
  120. <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>
  121. <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
  122. </div>
  123. <div class="flex-box-ce" style="margin-left: 20px;" v-if="selectInput.id==2">
  124. <div class="label">宽</div>
  125. <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>
  126. <span style="font-size: 12px;position: relative;top: 5px;left: 5px;">cm</span>
  127. </div>
  128. <div class="flex-1"></div>
  129. <el-popover placement="top-end" width="800" trigger="hover">
  130. <div><img src="@/assets/image/321.jpg" style="width: 100%;"/></div>
  131. <div class="blue cursor" slot="reference">检查单示例</div>
  132. </el-popover>
  133. </div>
  134. <div style="width: 100%;height: 10cm;background-color: #f1f1f1;position: relative;">
  135. <div :style="{width:printW+'cm',height:printH+'cm'}" style="position:relative;background-color: #fff;margin: 0 auto;top: 50%;transform: translate(0, -50%);">
  136. <template v-for="item in inputs">
  137. <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'}">
  138. {{item.name}}
  139. </div>
  140. <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'}">
  141. {{item.name}}
  142. </div>
  143. </template>
  144. </div>
  145. </div>
  146. <span slot="footer" class="dialog-footer">
  147. <el-button @click="dialogVisible = false" size="medium">取 消</el-button>
  148. <el-button type="primary" @click="sumbit" size="medium">保 持</el-button>
  149. </span>
  150. </el-dialog>
  151. <el-dialog @close="closeCode" :visible.sync="innerVisible" width="444px">
  152. <div style="border-radius: 15px;border: 1px solid #f1f1f1;padding: 10px; width: 346px;box-sizing: border-box;margin: 0 auto;">
  153. <div id="qrcode" ref="qrcode"></div>
  154. </div>
  155. <div style="margin-top: 10px;text-align: center;color: #666;">请使用钉钉APP扫描二维码</div>
  156. </el-dialog>
  157. </div>
  158. </template>
  159. <script>
  160. import moment from 'moment';
  161. import QRCode from 'qrcodejs2';
  162. export default {
  163. data() {
  164. return {
  165. instantPickerOptions: {
  166. shortcuts: [
  167. {
  168. text: '今天',
  169. onClick(picker) {
  170. const now = new Date(new Date().toLocaleDateString());
  171. const start = now.getTime();
  172. picker.$emit('pick', [moment(start).format('YYYY-MM-DD'), moment(start).format('YYYY-MM-DD')]);
  173. }
  174. },
  175. {
  176. text: '昨天',
  177. onClick(picker) {
  178. const now = new Date(new Date().toLocaleDateString());
  179. const start = now.getTime() - 60 * 60 * 24 * 1000;
  180. picker.$emit('pick', [moment(start).format('YYYY-MM-DD'),moment(start).format('YYYY-MM-DD')]);
  181. }
  182. },
  183. {
  184. text: '本周',
  185. onClick(picker) {
  186. const now = new Date(new Date().toLocaleDateString());
  187. const start = now.getTime() - (now.getDay() - 1) * 24 * 60 * 60 * 1000;
  188. const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
  189. picker.$emit('pick', [moment(start).format('YYYY-MM-DD'), moment(end).format('YYYY-MM-DD')]);
  190. }
  191. },
  192. {
  193. text: '上周',
  194. onClick(picker) {
  195. const now = new Date(new Date().toLocaleDateString());
  196. const start = now.getTime() - (now.getDay() + 6) * 24 * 60 * 60 * 1000;
  197. const end = start + 7 * 24 * 60 * 60 * 1000 - 1000;
  198. picker.$emit('pick', [moment(start).format('YYYY-MM-DD'), moment(end).format('YYYY-MM-DD')]);
  199. }
  200. },
  201. {
  202. text: '本月',
  203. onClick(picker) {
  204. const now = new Date();
  205. const startDate = new Date(now.getFullYear(), now.getMonth(), 1);
  206. const endDate = new Date(now.getFullYear(), now.getMonth() + 1, 0);
  207. picker.$emit('pick', [moment(startDate.getTime()).format('YYYY-MM-DD'), moment(endDate.getTime()).format('YYYY-MM-DD')]);
  208. }
  209. },
  210. {
  211. text: '上月',
  212. onClick(picker) {
  213. const now = new Date();
  214. const startDate = new Date(now.getFullYear() - (now.getMonth() > 0 ? 0 : 1), (now.getMonth() + 11) % 12, 1);
  215. const endDate = new Date(now.getFullYear(), now.getMonth(), 0);
  216. picker.$emit('pick', [moment(startDate.getTime()).format('YYYY-MM-DD'), moment(endDate.getTime()).format('YYYY-MM-DD')]);
  217. }
  218. },
  219. {
  220. text: '本季',
  221. onClick(picker) {
  222. const quarter=Math.ceil((new Date().getMonth()+1)/3)
  223. let str=moment().format(`YYYY-${(quarter-1)*3+1}-01`);
  224. let ent=moment(moment().format(`YYYY-${(quarter-1)*3+1}-01`)).add(2,`month`).endOf('month').format("YYYY-MM-DD");
  225. console.log(str,ent)
  226. picker.$emit('pick',[str,ent]);
  227. }
  228. },
  229. {
  230. text: '本年',
  231. onClick(picker) {
  232. let year=moment().format('YYYY');
  233. picker.$emit('pick', [year+'-01-01',year+'-12-31']);
  234. }
  235. },
  236. ],
  237. onPick: (obj) => {
  238. if(!this.dialogVisible){
  239. this.pickerMinDate = new Date(obj.minDate).getTime();
  240. }
  241. },
  242. disabledDate : time => {
  243. if (this.pickerMinDate && !this.dialogVisible) {
  244. const day1 = 30 * 24 * 3600 * 1000//限制只能选一个月的范围区间
  245. let maxTime = this.pickerMinDate + day1
  246. let minTime = this.pickerMinDate - day1
  247. return time.getTime() > maxTime || time.getTime()<minTime
  248. }
  249. }
  250. },
  251. total:0,
  252. page: 1,
  253. page_size: 10,
  254. formData: {
  255. dept_id: '0',
  256. time_range: []
  257. },
  258. dept_name: [],
  259. dept_tree: [],
  260. loading: false,
  261. list:[],
  262. employee_map: this.$getCache('SET_EMPLOYEE_MAP'),
  263. employeeId:[],
  264. dialogVisible:false,
  265. printW:18,
  266. printH:7.5,
  267. inputs:{
  268. name:{name:'姓名',x:1,y:1.4,w:0,id:1},
  269. event:{name:'奖票事件',x:1,y:2.4,w:15,id:2},
  270. point:{name:'积分分值',x:1,y:3.9,w:0,id:3},
  271. name2:{name:'发放人',x:15,y:4.9,w:0,id:4},
  272. date:{name:'奖票日期',x:15,y:5.9,w:0,id:5},
  273. },
  274. selectInput:{name:'姓名',x:1,y:1.4,w:0,id:1},
  275. innerVisible:false,
  276. selectionItems:[1,2,3,4,5,6],
  277. isPrint:false,
  278. };
  279. },
  280. watch: {
  281. 'formData.time_range'(){
  282. this.selectBtn();
  283. },
  284. dept_name(val) {
  285. if (val.length !== 0) {
  286. this.formData.dept_id = val[val.length - 1];
  287. } else {
  288. this.formData.dept_id = 0;
  289. }
  290. this.employeeId=[];
  291. this.$nextTick(() => {
  292. this.$refs.dept.dropDownVisible = false;
  293. this.getEmployeeList();
  294. this.selectBtn();
  295. });
  296. },
  297. },
  298. methods: {
  299. printFn() {
  300. //传入dom结构即可
  301. this.isPrint=true;
  302. this.$nextTick(()=>{
  303. this.$print(this.$refs.print);
  304. this.isPrint=false;
  305. })
  306. },
  307. ruleQRcode() {
  308. this.innerVisible = true;
  309. // 使用$nextTick确保数据渲染
  310. this.$nextTick(() => {
  311. this.payOrder();
  312. });
  313. },
  314. payOrder () {// 展示二维码
  315. let url = 'dingtalk://dingtalkclient/action/open_micro_app'
  316. let appid = '?appId='+this.$appId
  317. let corpId = '&corpId='+this.$getCache('corpId')
  318. let page = '&page='+encodeURIComponent(`pages/reportBox/report/report?employee_id=${encodeURIComponent(this.$getUserData().id)}`)//encodeURIComponent('小米')
  319. let urls = url+appid+corpId+page
  320. var qrcode = new QRCode('qrcode', {
  321. text: urls, // 二维码内容
  322. width: 325,
  323. height: 325,
  324. render: 'table', // 设置渲染方式(有两种方式 table和canvas,默认是canvas)
  325. colorDark: '#34373e', // 二维码色
  326. colorLight: '#ffffff', // 背景色
  327. correctLevel: QRCode.CorrectLevel.H // 容错等级,H是heigh,最高,所以二维码看起来很密
  328. })
  329. },
  330. // 关闭弹框,清除已经生成的二维码
  331. closeCode() {
  332. setTimeout(() => {
  333. this.$refs.qrcode.innerHTML = '';
  334. }, 150);
  335. },
  336. checkCountry(e,index) {
  337. if(index==1){
  338. if(this.printW > 22){
  339. this.printW='22';
  340. }
  341. }
  342. if(index==2){
  343. if(this.printH > 9){
  344. this.printH='9';
  345. }
  346. }
  347. },
  348. deleteEvents(selection) {
  349. this.selectionItems = selection;
  350. this.selectionID = selection.map(item => {
  351. return item.id;
  352. });
  353. },
  354. selectBtn(){
  355. this.page=1;
  356. this.get_list();
  357. },
  358. getEmployeeList() {
  359. this.$axios('get', '/api/employee/list', { dept_id: this.formData.dept_id }).then(res => {
  360. this.employee_map = res.data.data.list;
  361. });
  362. },
  363. sumbit(){
  364. },
  365. //请求数据
  366. get_list() {
  367. let data={
  368. page:this.page,
  369. page_size:this.page_size
  370. };
  371. this.loading = true;
  372. this.$axios('get', '/api/integral/statistics/ranking', data, 'v2').then(res => {
  373. this.labelName = this.formData.pt_id == 2 ? 'A分' : 'B分';
  374. if (res.data.code == 1) {
  375. this.list =this.$returnDeptName(res.data.data.list);
  376. this.total = res.data.data.total;
  377. } else {
  378. this.$message.error(res.data.data.msg);
  379. }
  380. })
  381. .finally(() => {
  382. this.loading = false;
  383. });
  384. },
  385. //获取部门
  386. getDepartment() {
  387. this.$axios('get', '/api/department/tree').then(res => {
  388. this.dept_tree = this.getTreeData(res.data.data.list);
  389. });
  390. },
  391. // 递归判断列表,把最后的children设为undefined
  392. getTreeData(data) {
  393. for (var i = 0; i < data.length; i++) {
  394. data[i].obj = { id: data[i].id, name: data[i].name };
  395. if (data[i]._child.length < 1) {
  396. // children若为空数组,则将children设为undefined
  397. data[i]._child = undefined;
  398. } else {
  399. // children若不为空数组,则继续 递归调用 本方法
  400. this.getTreeData(data[i]._child);
  401. }
  402. }
  403. return data;
  404. },
  405. // 页面变更
  406. handleCurrentChange(val) {
  407. this.page = val;
  408. this.get_list();
  409. },
  410. handleSizeChange(val) {
  411. this.page = 1;
  412. this.page_size = val;
  413. this.get_list();
  414. },
  415. },
  416. created() {
  417. if(this.$getToken()){
  418. this.getEmployeeList();
  419. this.getDepartment();
  420. }else{
  421. this.innerVisible=true;
  422. }
  423. },
  424. mounted() {
  425. }
  426. };
  427. </script>
  428. <style scoped lang="scss">
  429. .print_img{
  430. width: 20cm;
  431. height: 10cm;
  432. text-align: center;
  433. border: 1px solid #000;
  434. z-index: 9;
  435. }
  436. .print-box{
  437. margin: auto;
  438. background-color: #fff;
  439. position: absolute;
  440. top: 50%;
  441. left: 50%;
  442. transform: translate(-50%, -50%);
  443. }
  444. .input-item{
  445. background: #f4f4f5;
  446. border-radius: 4px;
  447. padding:6px 10px;
  448. cursor: pointer;
  449. color: #909399;
  450. position: absolute;
  451. }
  452. .activeInput{
  453. background-color: #ECF5FF;
  454. color: #26a2ff;
  455. }
  456. .label{
  457. text-align: right;
  458. vertical-align: middle;
  459. float: left;
  460. font-size: 14px;
  461. color: #606266;
  462. line-height: 40px;
  463. padding: 0 12px 0 0;
  464. box-sizing: border-box;
  465. font-weight: 600;
  466. }
  467. .search_box {
  468. ::v-deep button:active {
  469. background: #26a2ff;
  470. }
  471. ::v-deep button:active .el-icon-search {
  472. color: #fff;
  473. }
  474. }
  475. .date-picker-width {
  476. width: 100% !important;
  477. }
  478. .nopoint_box {
  479. display: inline-block;
  480. text-align: center;
  481. width: 100%;
  482. margin-bottom: 10px;
  483. }
  484. .noimg {
  485. display: inline-block;
  486. width: 110px;
  487. height: 110px;
  488. margin: 22px auto 16px;
  489. /* background:url("/static/images/nodata_default.png") no-repeat center; */
  490. background-size: 99%;
  491. }
  492. .noperson {
  493. display: inline-block;
  494. width: 110px;
  495. height: 110px;
  496. line-height: none;
  497. margin: 22px auto 16px;
  498. background: url('/static/images/noperson_default.png') no-repeat center;
  499. background-size: 99%;
  500. }
  501. .title {
  502. display: block;
  503. text-align: center;
  504. font-size: 12px !important;
  505. line-height: 30px;
  506. color: #909399 !important;
  507. padding: 0;
  508. }
  509. .nopoint_box a {
  510. color: #26a2ff;
  511. }
  512. .chart_content {
  513. .chart-legend__wrap {
  514. text-align: right;
  515. padding: 20px;
  516. padding-right: 50px;
  517. & .chart-legend__pink {
  518. position: relative;
  519. padding-left: 12px;
  520. padding-right: 5px;
  521. &:after {
  522. content: '';
  523. position: absolute;
  524. margin-top: -2px;
  525. top: 35%;
  526. left: 0;
  527. width: 8px;
  528. height: 8px;
  529. background: #f56c6c;
  530. border-radius: 100%;
  531. }
  532. }
  533. & .chart-legend__green {
  534. position: relative;
  535. padding-left: 12px;
  536. &:after {
  537. content: '';
  538. position: absolute;
  539. margin-top: -2px;
  540. top: 35%;
  541. left: 0;
  542. width: 8px;
  543. height: 8px;
  544. background: #53b87f;
  545. border-radius: 100%;
  546. }
  547. }
  548. }
  549. }
  550. .drawer_title {
  551. font-size: 18px;
  552. padding: 20px;
  553. }
  554. .manager_statistics_box {
  555. background-color: #ffffff;
  556. padding: 20px;
  557. min-height: calc(100vh - 160px);
  558. ::v-deep .el-row .el-checkbox .el-checkbox__label {
  559. line-height: 20px;
  560. }
  561. }
  562. .diy_tip_bg {
  563. background: #f5f6f9;
  564. overflow: hidden;
  565. .diy-tip {
  566. margin-bottom: 15px;
  567. border: 1px solid #67c23a;
  568. padding: 20px 16px;
  569. p {
  570. color: #67c23a !important;
  571. font-size: 14px;
  572. margin: 0 !important;
  573. padding: 4px 0;
  574. }
  575. }
  576. }
  577. ::v-deep .el-dialog {
  578. // top: 21%;
  579. }
  580. .picker_er {
  581. margin-top: 20px;
  582. }
  583. .el-range-editor--medium.el-input__inner {
  584. width: 280px;
  585. }
  586. ::v-deep .el-cascader .el-input .el-input__inner {
  587. width: 150px;
  588. }
  589. .el-checkbox.is-bordered.el-checkbox--medium {
  590. padding: 9px 20px 7px 10px;
  591. }
  592. </style>