增加二维码功能

This commit is contained in:
huangdeliang 2021-03-05 17:19:18 +08:00
parent 17b7c04f6d
commit a50c6afa49
5 changed files with 685 additions and 307 deletions

View File

@ -64,6 +64,7 @@
"vue": "2.6.10", "vue": "2.6.10",
"vue-count-to": "1.0.13", "vue-count-to": "1.0.13",
"vue-cropper": "0.4.9", "vue-cropper": "0.4.9",
"vue-qr": "^2.3.0",
"vue-router": "3.0.2", "vue-router": "3.0.2",
"vue-scrollto": "^2.20.0", "vue-scrollto": "^2.20.0",
"vue-splitpane": "1.0.4", "vue-splitpane": "1.0.4",

View File

@ -50,21 +50,27 @@
width="200" width="200"
/> />
<el-table-column <el-table-column label="合同地址" align="center" prop="path">
label="合同地址"
align="center"
prop="path"
width="80"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
type="text" type="text"
style="margin-right: 8px"
icon="el-icon-copy-document" icon="el-icon-copy-document"
@click="handleCopy(scope.row.path)" @click="handleCopy(scope.row.path)"
class="copyBtn" class="copyBtn"
:data-clipboard-text="copyValue" :data-clipboard-text="copyValue"
>复制 >复制
</el-button> </el-button>
<el-popover placement="top" trigger="click">
<VueQr :text="copyValue" :logoSrc="logo" />
<el-button
slot="reference"
icon="el-icon-picture-outline"
type="text"
@click="handleCopy(scope.row.path)"
>二维码</el-button
>
</el-popover>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="操作" align="center" width="180"> <el-table-column label="操作" align="center" width="180">
@ -108,15 +114,18 @@ import { delContract, listContract } from "@/api/custom/contract";
import ContractDetail from "@/components/ContractDetail"; import ContractDetail from "@/components/ContractDetail";
import Clipboard from "clipboard"; import Clipboard from "clipboard";
import ContractAdd from "@/components/ContractAdd"; import ContractAdd from "@/components/ContractAdd";
import VueQr from "vue-qr";
const logo = require("@/assets/logo/logo_b.png");
export default { export default {
name: "CustomerContractDrawer", name: "CustomerContractDrawer",
components: { components: {
"contract-detail": ContractDetail, "contract-detail": ContractDetail,
"add-contract": ContractAdd, "add-contract": ContractAdd,
VueQr,
}, },
data() { data() {
return { return {
logo,
visible: false, visible: false,
title: "", title: "",
data: undefined, data: undefined,

View File

@ -10,16 +10,34 @@
<div class="app-container"> <div class="app-container">
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
<el-button icon="el-icon-share" size="small" title="点击复制链接" class="copyBtn" type="primary" :data-clipboard-text="copyValue" @click="handleCopy()">外食计算器</el-button> <el-button
icon="el-icon-share"
size="small"
title="点击复制链接"
class="copyBtn"
type="primary"
:data-clipboard-text="copyValue"
@click="handleCopy()"
>外食计算器</el-button
>
</el-col> </el-col>
<el-popover :placement="bottom" trigger="click">
<VueQr :text="copyValue" :logoSrc="logo" />
<el-button slot="reference">二维码</el-button>
</el-popover>
</el-row> </el-row>
<el-table :data="foodHeatStatisticsList" > <el-table :data="foodHeatStatisticsList">
<el-table-column label="日期" align="center" prop="edibleDate" width="120"> <el-table-column
label="日期"
align="center"
prop="edibleDate"
width="120"
>
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.edibleDate, '{y}-{m}-{d}') }}</span> <span>{{ parseTime(scope.row.edibleDate, "{y}-{m}-{d}") }}</span>
</template> </template>
</el-table-column> </el-table-column>
<!-- <el-table-column label="食材" align="center" prop="ingredient" /> <!-- <el-table-column label="食材" align="center" prop="ingredient" />
<el-table-column label="通俗计量" align="center" prop="unitName"> <el-table-column label="通俗计量" align="center" prop="unitName">
<template slot-scope="scope"> <template slot-scope="scope">
{{ scope.row.number ? (scope.row.number + "" + (scope.row.unitName != null ? scope.row.unitName : "")) : "" }} {{ scope.row.number ? (scope.row.number + "" + (scope.row.unitName != null ? scope.row.unitName : "")) : "" }}
@ -27,62 +45,87 @@
</el-table-column> </el-table-column>
<el-table-column label="质量(克)" align="center" prop="quantity" />--> <el-table-column label="质量(克)" align="center" prop="quantity" />-->
<el-table-column label="可摄入量" align="center" prop="maxHeatValue" /> <el-table-column
label="可摄入量"
align="center"
prop="maxHeatValue"
/>
<el-table-column label="食材热量" align="center" prop="heatValue" /> <el-table-column label="食材热量" align="center" prop="heatValue" />
<el-table-column label="热量缺口" align="center" prop="heatGap" /> <el-table-column label="热量缺口" align="center" prop="heatGap" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> <el-table-column
label="操作"
align="center"
class-name="small-padding fixed-width"
>
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
@click="handleDetail(scope.row)" @click="handleDetail(scope.row)"
v-hasPermi="['custom:foodHeatStatistics:query']" v-hasPermi="['custom:foodHeatStatistics:query']"
>详情</el-button> >详情</el-button
>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-edit" icon="el-icon-edit"
@click="handleCalculate(scope.row)" @click="handleCalculate(scope.row)"
>计算</el-button> >计算</el-button
>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-delete" icon="el-icon-delete"
@click="handleOnDeleteClick(scope.row)" @click="handleOnDeleteClick(scope.row)"
v-hasPermi="['custom:foodHeatStatistics:remove']" v-hasPermi="['custom:foodHeatStatistics:remove']"
>删除</el-button> >删除</el-button
>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<pagination <pagination
v-show="total>0" v-show="total > 0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
@pagination="fetchHeatList" @pagination="fetchHeatList"
/> />
<heatStatisticsCalculate ref="heatStatisticsCalculateRef"></heatStatisticsCalculate> <heatStatisticsCalculate
<heatStatisticsDetail ref="heatStatisticsDetailRef"></heatStatisticsDetail> ref="heatStatisticsCalculateRef"
></heatStatisticsCalculate>
<heatStatisticsDetail
ref="heatStatisticsDetailRef"
></heatStatisticsDetail>
</div> </div>
</el-drawer> </el-drawer>
</div> </div>
</template> </template>
<script> <script>
import { listFoodHeatStatistics, getFoodHeatStatistics, delFoodHeatStatistics, addFoodHeatStatistics, updateFoodHeatStatistics, exportFoodHeatStatistics } from "@/api/custom/foodHeatStatistics"; import {
import Clipboard from 'clipboard'; listFoodHeatStatistics,
import HeatStatisticsCalculate from "@/components/HeatStatisticsCalculate"; getFoodHeatStatistics,
import HeatStatisticsDetail from "@/components/HeatStatisticsDetail"; delFoodHeatStatistics,
addFoodHeatStatistics,
updateFoodHeatStatistics,
exportFoodHeatStatistics,
} from "@/api/custom/foodHeatStatistics";
import Clipboard from "clipboard";
import HeatStatisticsCalculate from "@/components/HeatStatisticsCalculate";
import HeatStatisticsDetail from "@/components/HeatStatisticsDetail";
import VueQr from "vue-qr";
const logo = require("@/assets/logo/logo_b.png");
export default { export default {
name: "HeatStatisticsDrawer", name: "HeatStatisticsDrawer",
components: { components: {
'heatStatisticsCalculate':HeatStatisticsCalculate, heatStatisticsCalculate: HeatStatisticsCalculate,
'heatStatisticsDetail': HeatStatisticsDetail heatStatisticsDetail: HeatStatisticsDetail,
VueQr,
}, },
data() { data() {
return { return {
logo,
visible: false, visible: false,
title: "", title: "",
data: undefined, data: undefined,
@ -94,7 +137,7 @@ export default {
pageNum: 1, pageNum: 1,
pageSize: 10, pageSize: 10,
}, },
copyValue: "" copyValue: "",
}; };
}, },
methods: { methods: {
@ -106,33 +149,31 @@ export default {
} }
this.title = `${this.data.name}」热量统计列表`; this.title = `${this.data.name}」热量统计列表`;
this.queryParams.customerId = data.id; this.queryParams.customerId = data.id;
this.copyValue =
window.location.origin.replace("manage", "sign") +
"/foodHeatCalculator/" +
this.data.encId;
this.fetchHeatList(); this.fetchHeatList();
}, },
fetchHeatList() { fetchHeatList() {
listFoodHeatStatistics(this.queryParams).then(response => { listFoodHeatStatistics(this.queryParams).then((response) => {
this.foodHeatStatisticsList = response.rows; this.foodHeatStatisticsList = response.rows;
this.total = response.total; this.total = response.total;
this.visible = true; this.visible = true;
}); });
}, },
handleAdd() { handleAdd() {},
},
handleOnClosed() { handleOnClosed() {
this.data = undefined; this.data = undefined;
this.copyValue = ""; this.copyValue = "";
}, },
handleOnDeleteClick(data) { handleOnDeleteClick(data) {
const ids = data.id || this.ids; const ids = data.id || this.ids;
this.$confirm( this.$confirm("是否确认删除该数据项?", "警告", {
'是否确认删除该数据项?', confirmButtonText: "确定",
"警告", cancelButtonText: "取消",
{ type: "warning",
confirmButtonText: "确定", })
cancelButtonText: "取消",
type: "warning",
}
)
.then(function () { .then(function () {
return delFoodHeatStatistics(ids); return delFoodHeatStatistics(ids);
}) })
@ -143,21 +184,20 @@ export default {
.catch(function () {}); .catch(function () {});
}, },
handleCopy() { handleCopy() {
this.copyValue = window.location.origin.replace('manage', 'sign') + "/foodHeatCalculator/"+this.data.encId; new Clipboard(".copyBtn");
const btnCopy = new Clipboard('.copyBtn');
this.$message({ this.$message({
message: '拷贝成功', message: "拷贝成功",
type: 'success' type: "success",
}); });
}, },
handleCalculate(data){ handleCalculate(data) {
this.$refs.heatStatisticsCalculateRef.showDialog(data,() => { this.$refs.heatStatisticsCalculateRef.showDialog(data, () => {
this.fetchHeatList(); this.fetchHeatList();
}); });
}, },
handleDetail(data){ handleDetail(data) {
this.$refs.heatStatisticsDetailRef.showDialog(data, this.data.name); this.$refs.heatStatisticsDetailRef.showDialog(data, this.data.name);
} },
}, },
}; };
</script> </script>

File diff suppressed because it is too large Load Diff

View File

@ -187,7 +187,7 @@
prop="updateTime" prop="updateTime"
width="180" width="180"
/> />
<el-table-column label="合同地址" align="center" prop="path" width="80"> <el-table-column label="合同地址" align="center" prop="path" >
<template slot-scope="scope"> <template slot-scope="scope">
<el-button <el-button
type="text" type="text"
@ -197,6 +197,16 @@
:data-clipboard-text="copyValue" :data-clipboard-text="copyValue"
>复制 >复制
</el-button> </el-button>
<el-popover placement="top" trigger="click">
<VueQr :text="copyValue" :logoSrc="logo" />
<el-button
slot="reference"
icon="el-icon-picture-outline"
type="text"
@click="handleCopy(scope.row.path)"
>二维码</el-button
>
</el-popover>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" align="center" prop="remark" width="120" /> <el-table-column label="备注" align="center" prop="remark" width="120" />
@ -320,9 +330,14 @@ import { addContract, delContract, listContract } from "@/api/custom/contract";
import Clipboard from "clipboard"; import Clipboard from "clipboard";
import { mapGetters } from "vuex"; import { mapGetters } from "vuex";
import VueQr from "vue-qr";
const logo = require("@/assets/logo/logo_b.png");
export default { export default {
name: "Contract", name: "Contract",
components: {
VueQr,
},
data() { data() {
const checkServePromise = (rule, value, callback) => { const checkServePromise = (rule, value, callback) => {
if (this.form.projectId == 0 && !value) { if (this.form.projectId == 0 && !value) {
@ -331,6 +346,7 @@ export default {
callback(); callback();
}; };
return { return {
logo,
// //
loading: true, loading: true,
// //