123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857 |
- <template>
- <div class="tenant">
- <div class="content">
- <byTable
- :source="sourceList.data"
- :pagination="sourceList.pagination"
- :config="config"
- :loading="loading"
- :selectConfig="selectConfig"
- highlight-current-row
- :action-list="[
- {
- text: '新建报价单',
- action: () => newPriceSheet(),
- },
- ]"
- @get-list="getList"
- >
- <template #code="{ item }">
- <div style="width: 100%">
- <a
- style="color: #409eff; cursor: pointer; word-break: break-all"
- @click="pushProcessApproval(item)"
- >{{ item.code }}</a
- >
- </div>
- </template>
- <template #amount="{ item }">
- <div>
- <span style="padding-right: 4px">{{ item.currency }}</span>
- <span>{{ moneyFormat(item.amount, 2) }}</span>
- </div>
- </template>
- <template #advanceRatio="{ item }">
- <div>
- <span>{{ item.advanceRatio }}%</span>
- </div>
- </template>
- <template #status="{ item }">
- <div>
- <span :style="getStyle(item.status)">{{
- dictValueLabel(item.status, status)
- }}</span>
- </div>
- </template>
- </byTable>
- </div>
- <el-dialog title="打印" v-if="openPrint" v-model="openPrint" width="860">
- <div id="printMe">
- <div
- id="pdfDom"
- style="width: 800px; padding: 16px; font-size: 12px !important"
- >
- <div style="font-size: 18px; text-align: center">
- {{
- getLabel(
- printDetails.sellCorporationId,
- corporationList,
- "nameEn"
- )
- }}
- </div>
- <div style="text-align: center">
- {{ printDetails.sellCountryName }},{{
- printDetails.sellProvinceName
- }},{{ printDetails.sellCityName }},{{ printDetails.sellAddress }}
- </div>
- <div
- style="
- font-size: 14px;
- color: #409eff;
- text-align: center;
- padding-top: 16px;
- "
- >
- QUOTATION
- </div>
- <div style="padding-top: 8px">
- <div>Reference NO. : {{ printDetails.code }}</div>
- <div style="display: flex">
- <div style="width: 50%">
- DATE:
- {{ moment(printDetails.createTime).format("DD/MMM/yyyy") }}
- </div>
- <div style="width: 50%">Valid Date:</div>
- </div>
- </div>
- <div style="border: 1px solid black; display: flex">
- <div style="width: 50%; border-right: 1px solid black">
- <div style="color: #409eff">VENDOR:</div>
- <div>
- {{
- getLabel(
- printDetails.sellCorporationId,
- corporationList,
- "nameEn"
- )
- }}
- </div>
- <div style="padding: 16px 0">
- {{ printDetails.sellCountryName }},{{
- printDetails.sellProvinceName
- }},{{ printDetails.sellCityName }},{{
- printDetails.sellAddress
- }}
- </div>
- <div>
- {{ printDetails.sellContactName }},{{
- printDetails.sellContactNumber
- }}
- </div>
- </div>
- <div style="width: 50%">
- <div style="color: #409eff">BUYER:</div>
- <div>
- {{
- getLabel(printDetails.buyCorporationId, customerList, "name")
- }}
- </div>
- <div style="padding: 16px 0">
- {{ printDetails.buyCountryName }},{{
- printDetails.buyProvinceName
- }},{{ printDetails.buyCityName }},{{ printDetails.buyAddress }}
- </div>
- <div>
- {{ printDetails.buyContactName }},{{
- printDetails.buyContactNumber
- }}
- </div>
- </div>
- </div>
- <div style="height: 16px"></div>
- <div style="border: 1px solid black">
- <div style="display: flex; width: 100%">
- <div
- style="
- width: 33%;
- border-bottom: 1px solid black;
- border-right: 1px solid black;
- "
- >
- <div style="color: #409eff">COUNTRY OF ORIGIN:</div>
- <div>{{ printDetails.sellCountryName }}</div>
- </div>
- <div
- style="
- width: 34%;
- border-bottom: 1px solid black;
- border-right: 1px solid black;
- "
- >
- <div style="color: #409eff">COUNTRY OF DESTINATION:</div>
- <div>{{ printDetails.buyCountryName }}</div>
- </div>
- <div style="width: 33%; border-bottom: 1px solid black">
- <div style="color: #409eff">PLACE OF DISCHARGE:</div>
- <div>{{ printDetails.transportRemark }}</div>
- </div>
- </div>
- <div style="display: flex; width: 100%">
- <div
- style="
- width: 33%;
- border-bottom: 1px solid black;
- border-right: 1px solid black;
- "
- >
- <div style="color: #409eff">TERMS OF DELIVERY:</div>
- <div>
- {{ dictValueLabel(printDetails.tradeMethods, tradeMethods) }}
- </div>
- </div>
- <div
- style="
- width: 34%;
- border-bottom: 1px solid black;
- border-right: 1px solid black;
- "
- >
- <div style="color: #409eff">CURRENCY:</div>
- <div>
- {{ dictValueLabel(printDetails.currency, accountCurrency) }}
- </div>
- </div>
- <div style="width: 33%; border-bottom: 1px solid black">
- <div style="color: #409eff">EXPORT BY/VIA:</div>
- <div>
- {{
- dictValueLabel(printDetails.transportMethod, shippingMethod)
- }}
- </div>
- </div>
- </div>
- <div style="display: flex; width: 100%">
- <div style="width: 33%; border-right: 1px solid black">
- <div style="color: #409eff">DELIVERY TIME:</div>
- </div>
- <div style="width: 67%">
- <div style="color: #409eff">TERMS OF PAYMENT:</div>
- <div>{{ printDetails.remark }}</div>
- </div>
- </div>
- </div>
- <div style="height: 16px"></div>
- <div class="baseRow" style="display: flex; color: #409eff">
- <div class="contentRow" style="width: 50px; text-align: center">
- NO.
- </div>
- <div
- class="contentRow"
- style="width: calc(100% - 450px); text-align: center"
- >
- COMMODITY, SPECIFICATION
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- UNIT
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- QUANTITY
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- UNIT PRICE
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- TOTAL PRICE
- </div>
- </div>
- <div
- v-if="
- printDetails.quotationProductList &&
- printDetails.quotationProductList.length > 0
- "
- >
- <div
- class="baseRow"
- style="display: flex"
- v-for="(item, index) in printDetails.quotationProductList"
- :key="item.productId"
- >
- <div class="contentRow" style="width: 50px; text-align: center">
- {{ index + 1 }}
- </div>
- <div
- class="contentRow"
- style="width: calc(100% - 450px); text-align: center"
- >
- {{ item.productName }}
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- {{ dictValueLabel(item.productUnit, productUnit) }}
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- {{ item.quantity }}
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- {{ item.price }}
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- {{ item.amount }}
- </div>
- </div>
- </div>
- <div class="baseRow" style="display: flex; color: #409eff">
- <div
- class="contentRow"
- style="width: calc(100% - 400px); text-align: center"
- >
- SUBTOTAL:
- </div>
- <div
- class="contentRow"
- style="width: 100px; text-align: center"
- ></div>
- <div class="contentRow" style="width: 100px; text-align: center">
- {{ statistics("quantity", 2) }}
- </div>
- <div
- class="contentRow"
- style="width: 100px; text-align: center"
- ></div>
- <div class="contentRow" style="width: 100px; text-align: center">
- {{ statistics("amount", 2) }}
- </div>
- </div>
- <div
- v-if="
- printDetails.quotationPayList &&
- printDetails.quotationPayList.length > 0
- "
- >
- <div
- class="baseRow"
- style="display: flex"
- v-for="(item, index) in printDetails.quotationPayList"
- :key="index"
- >
- <div
- class="contentRow"
- style="
- width: calc(100% - 100px);
- text-align: right;
- color: #409eff;
- "
- >
- {{ item.payName }}:
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- {{ item.amount }}
- </div>
- </div>
- </div>
- <div class="baseRow" style="display: flex">
- <div
- class="contentRow"
- style="
- width: calc(100% - 100px);
- text-align: right;
- color: #409eff;
- "
- >
- TOTAL PRICE:
- </div>
- <div class="contentRow" style="width: 100px; text-align: center">
- {{ getAllMoney(statistics("amount", 2)) }}
- </div>
- </div>
- <div
- class="baseRow"
- style="display: flex; border-bottom: 1px solid black"
- >
- <div class="contentRow" style="width: 100%">
- {{
- translateIntoEnglish(printDetails.amount, printDetails.currency)
- }}
- </div>
- </div>
- <!-- <div style="height: 16px"></div>
- <div class="baseRow" style="color: #409eff">
- <div class="contentRow" style="width: 100%">ACCOUNT INFORMATION:</div>
- </div>
- <div class="baseRow" style="border-bottom: 1px solid black">
- <div class="contentRow" style="width: 100%">
- <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
- Beneficiary Name: {{ printDetails.beneficiaryName }}
- </div>
- <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
- Beneficiary Bank: {{ printDetails.beneficiaryBank }}
- </div>
- <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
- Beneficiary Bank Address: {{ printDetails.beneficiaryBankAddress }}
- </div>
- <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
- Beneficiary Account Number: {{ printDetails.beneficiaryAccountNumber }}
- </div>
- <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">Swift Code: {{ printDetails.swiftCode }}</div>
- <div style="line-height: 24px; padding-left: 4px; word-break: break-all; word-wrap: break-word">
- Beneficiary Address: {{ printDetails.beneficiaryAddress }}
- </div>
- </div>
- </div> -->
- <div style="height: 32px"></div>
- <div style="display: flex">
- <div style="width: 50%">
- <div style="color: #409eff">CONFIRMED BY VENDOR:</div>
- <div>
- {{
- getLabel(
- printDetails.sellCorporationId,
- corporationList,
- "nameEn"
- )
- }}
- </div>
- </div>
- <div style="width: 50%">
- <div style="color: #409eff">CONFIRMED BY BUYER:</div>
- <div>
- {{
- getLabel(printDetails.buyCorporationId, customerList, "name")
- }}
- </div>
- </div>
- </div>
- </div>
- </div>
- <template #footer>
- <el-button @click="openPrint = false" size="large">取消</el-button>
- <el-button v-print="printObj" size="large">打印</el-button>
- <el-button type="primary" @click="clickDownload()" size="large"
- >下载PDF</el-button
- >
- </template>
- </el-dialog>
- </div>
- </template>
- <script setup>
- import { computed, ref } from "vue";
- import byTable from "@/components/byTable/index";
- import moment from "moment";
- import useUserStore from "@/store/modules/user";
- const route = useRoute();
- const { proxy } = getCurrentInstance();
- const accountList = ref([]);
- const corporationList = ref([]);
- const customerList = ref([]);
- const tradeMethods = ref([]);
- const accountCurrency = ref([]);
- const shippingMethod = ref([]);
- const productUnit = ref([]);
- const status = ref([
- {
- label: "草稿",
- value: 0,
- },
- {
- label: "审批中",
- value: 10,
- },
- {
- label: "驳回",
- value: 20,
- },
- {
- label: "审批通过",
- value: 30,
- },
- {
- label: "终止",
- value: 99,
- },
- ]);
- const sourceList = ref({
- data: [],
- pagination: {
- total: 0,
- pageNum: 1,
- pageSize: 10,
- keyword: "",
- status: "",
- sellCorporationId: "",
- },
- });
- const loading = ref(false);
- const selectConfig = computed(() => {
- return [
- {
- label: "审批状态",
- prop: "status",
- data: status.value,
- },
- {
- label: "归属公司",
- prop: "sellCorporationId",
- data: corporationList.value,
- },
- ];
- });
- const config = computed(() => {
- return [
- {
- attrs: {
- label: "报价单号",
- slot: "code",
- width: 200,
- },
- },
- {
- attrs: {
- label: "归属公司",
- prop: "sellCorporationId",
- "min-width": 220,
- },
- render(type) {
- let text = "";
- if (corporationList.value && corporationList.value.length > 0) {
- let data = corporationList.value.filter((item) => item.value == type);
- if (data && data.length > 0) {
- text = data[0].label;
- }
- }
- return text;
- },
- },
- {
- attrs: {
- label: "报价人",
- prop: "userName",
- width: 160,
- },
- },
- {
- attrs: {
- label: "报价时间",
- prop: "createTime",
- width: 160,
- },
- },
- {
- attrs: {
- label: "客户名称",
- prop: "buyCorporationId",
- "min-width": 220,
- },
- render(type) {
- let text = "";
- if (customerList.value && customerList.value.length > 0) {
- let data = customerList.value.filter((item) => item.value == type);
- if (data && data.length > 0) {
- text = data[0].label;
- }
- }
- return text;
- },
- },
- {
- attrs: {
- label: "报价金额",
- slot: "amount",
- width: 140,
- },
- },
- {
- attrs: {
- label: "预付比例",
- slot: "advanceRatio",
- width: 120,
- },
- },
- {
- attrs: {
- label: "审批状态",
- prop: "status",
- width: 140,
- slot: "status",
- },
- },
- {
- attrs: {
- label: "操作",
- width: "180",
- align: "center",
- fixed: "right",
- },
- renderHTML(row) {
- return [
- row.status == 0
- ? {
- attrs: {
- label: "修改",
- type: "primary",
- text: true,
- },
- el: "button",
- click() {
- clickUpdate(row);
- },
- }
- : {},
- {
- attrs: {
- label: "复制",
- type: "primary",
- text: true,
- },
- el: "button",
- click() {
- clickCopy(row);
- },
- },
- {
- attrs: {
- label: "打印",
- type: "primary",
- text: true,
- },
- el: "button",
- click() {
- clickPrint(row);
- },
- },
- row.status == 30
- ? {
- attrs: {
- label: "生成合同",
- type: "primary",
- text: true,
- },
- el: "button",
- click() {
- generateContract(row);
- },
- }
- : {},
- ];
- },
- },
- ];
- });
- const getDict = () => {
- proxy
- .post("/saleQuotation/page", { pageNum: 1, pageSize: 999 })
- .then((res) => {
- accountList.value = res.rows.map((item) => {
- return {
- label: item.alias,
- value: item.id,
- };
- });
- });
- proxy.post("/corporation/page", { pageNum: 1, pageSize: 999 }).then((res) => {
- corporationList.value = res.rows.map((item) => {
- return {
- ...item,
- label: item.name,
- value: item.id,
- };
- });
- });
- proxy.post("/customer/page", { pageNum: 1, pageSize: 999 }).then((res) => {
- customerList.value = res.rows.map((item) => {
- return {
- ...item,
- label: item.name,
- value: item.id,
- };
- });
- });
- proxy
- .post("/dictTenantData/page", {
- pageNum: 1,
- pageSize: 999,
- dictCode: "trade_mode",
- tenantId: useUserStore().user.tenantId,
- })
- .then((res) => {
- if (res.rows && res.rows.length > 0) {
- tradeMethods.value = res.rows.map((item) => {
- return {
- label: item.dictValue,
- value: item.dictKey,
- };
- });
- }
- });
- proxy
- .post("/dictTenantData/page", {
- pageNum: 1,
- pageSize: 999,
- dictCode: "account_currency",
- tenantId: useUserStore().user.tenantId,
- })
- .then((res) => {
- if (res.rows && res.rows.length > 0) {
- accountCurrency.value = res.rows.map((item) => {
- return {
- label: item.dictValue,
- value: item.dictKey,
- };
- });
- }
- });
- proxy
- .post("/dictTenantData/page", {
- pageNum: 1,
- pageSize: 999,
- dictCode: "shipping_method",
- tenantId: useUserStore().user.tenantId,
- })
- .then((res) => {
- if (res.rows && res.rows.length > 0) {
- shippingMethod.value = res.rows.map((item) => {
- return {
- label: item.dictValue,
- value: item.dictKey,
- };
- });
- }
- });
- proxy.getDictOne(["unit"]).then((res) => {
- productUnit.value = res["unit"].map((x) => ({
- label: x.dictValue,
- value: x.dictKey,
- }));
- });
- };
- const getList = async (req) => {
- sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
- loading.value = true;
- proxy.post("/saleQuotation/page", sourceList.value.pagination).then((res) => {
- sourceList.value.data = res.rows;
- sourceList.value.pagination.total = res.total;
- setTimeout(() => {
- loading.value = false;
- }, 200);
- });
- };
- getDict();
- if (route.query.code) {
- sourceList.value.pagination.keyword = route.query.code;
- }
- getList();
- const newPriceSheet = () => {
- proxy.$router.replace({
- path: "/platform_manage/process/processApproval",
- query: {
- flowKey: "sale_quotation_flow",
- flowName: "报价审批流程",
- random: proxy.random(),
- },
- });
- };
- const clickCopy = (item) => {
- proxy.$router.replace({
- path: "/platform_manage/process/processApproval",
- query: {
- flowKey: "sale_quotation_flow",
- flowName: "报价审批流程",
- priceSheetId: item.id,
- random: proxy.random(),
- },
- });
- };
- const openPrint = ref(false);
- const printDetails = ref({});
- const clickPrint = (row) => {
- printDetails.value = {};
- openPrint.value = true;
- proxy.post("/saleQuotation/detail", { id: row.id }).then((res) => {
- printDetails.value = res;
- });
- };
- const clickDownload = () => {
- proxy.getPdf("报价单PDF文件");
- };
- const statistics = (label, index) => {
- let num = 0;
- if (
- printDetails.value.quotationProductList &&
- printDetails.value.quotationProductList.length > 0
- ) {
- printDetails.value.quotationProductList.map((item) => {
- if (item[label]) {
- num = parseFloat(Number(num) + Number(item[label])).toFixed(index);
- }
- });
- }
- return num;
- };
- const getLabel = (key, list, label) => {
- let text = "";
- if (list && list.length > 0) {
- let data = list.filter((item) => item.id === key);
- if (data && data.length > 0) {
- text = data[0][label];
- }
- }
- return text;
- };
- const getAllMoney = (num) => {
- let money = num;
- if (
- printDetails.value.quotationPayList &&
- printDetails.value.quotationPayList.length > 0
- ) {
- printDetails.value.quotationPayList.map((item) => {
- if (item.amount) {
- money = parseFloat(Number(money) + Number(item.amount)).toFixed(2);
- }
- });
- }
- return money;
- };
- const generateContract = (row) => {
- proxy.$router.replace({
- path: "/platform_manage/process/processApproval",
- query: {
- flowKey: "contract_flow",
- flowName: "销售合同审批流程",
- random: proxy.random(),
- priceSheetId: row.id,
- },
- });
- };
- const pushProcessApproval = (row) => {
- proxy.$router.push({
- path: "/platform_manage/process/processApproval",
- query: {
- flowKey: "sale_quotation_flow",
- id: row.flowId,
- processType: 20,
- random: proxy.random(),
- flowName: "报价单详情",
- },
- });
- return;
- };
- const printObj = ref({
- id: "printMe",
- popTitle: "",
- extraCss:
- "https://cdn.bootcdn.net/ajax/libs/animate.css/4.1.1/animate.compat.css, https://cdn.bootcdn.net/ajax/libs/hover.css/2.3.1/css/hover-min.css",
- extraHead: '<meta http-equiv="Content-Language"content="zh-cn"/>',
- });
- const getStyle = (status) => {
- if (status == 10) {
- return {
- color: "#FF9315",
- };
- } else if (status == 30) {
- return {
- color: "#39C55A",
- };
- } else if (status == 20 || status == 99) {
- return {
- color: "#FF655B",
- };
- } else {
- return {};
- }
- };
- const clickUpdate = (row) => {
- proxy.$router.replace({
- path: "/platform_manage/process/processApproval",
- query: {
- flowKey: "sale_quotation_flow",
- flowName: "报价审批流程",
- priceSheetIdOne: row.id,
- random: proxy.random(),
- },
- });
- };
- </script>
- <style lang="scss" scoped>
- .tenant {
- padding: 20px;
- }
- ::v-deep(.el-input-number .el-input__inner) {
- text-align: left;
- }
- .baseRow {
- min-height: 24px;
- border-top: 1px solid black;
- border-left: 1px solid black;
- }
- .contentRow {
- border-right: 1px solid black;
- line-height: 24px;
- padding-left: 4px;
- }
- </style>
|