Skip to content

V
vue3-element-lus

yma16 / vue3-element-lus
与 Fork 源项目一致

Fork自 inscode / VueJS

通知 1
Star 0
Fork 0
V
vue3-element-lus
提交 acc0d41c 编写于 作者: Q qq_38870145
浏览文件
操作

Sun May 26 19:54:00 CST 2024 inscode

上级 d235f65f
隐藏空白更改
内联 并排
Showing with 176 addition and 212 deletion
package.json
浏览文件 @ acc0d41c
......@@ -9,7 +9,9 @@
"dependencies": {
"element-plus": "^2.7.3",
"guess": "^1.0.2",
"vue": "^3.2.37"
"vue": "^3.2.37",
"jsbarcode": "^3.11.6",
"vue-html-to-paper":"^2.0.3"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.0.1",
......
src/App.vue
浏览文件 @ acc0d41c
<script setup>
import HelloWorld from './components/HelloWorld.vue'
import TheWelcome from './components/TheWelcome.vue'
</script>
<template>
<header>
<img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<!-- <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
<div class="wrapper">
<HelloWorld msg="You did it!" />
</div>
</div> -->
</header>
<main>
<TheWelcome />
<HelloWorld />
</main>
</template>
......
src/components/HelloWorld.vue
浏览文件 @ acc0d41c
<script setup>
defineProps({
msg: {
type: String,
required: true
}
})
</script>
<template>
<div class="greetings">
<h1 class="green">{{ msg }}</h1>
<h3>
You’ve successfully created a project with
<a target="_blank" href="https://vitejs.dev/">Vite</a> +
<a target="_blank" href="https://vuejs.org/">Vue 3</a>.
</h3>
</div>
<!-- 搜索工作栏 -->
<ContentWrap>
<el-form ref="queryFormRef" :inline="true" :model="state.queryParams" class="-mb-15px" label-width="68px">
<el-form-item label="商品名称" prop="productListId">
<el-input v-model="state.queryParams.productListId" class="!w-210px" clearable placeholder="商品名称或Id" />
</el-form-item>
<el-form-item label="门店名称" prop="storeId">
<el-input v-model="state.queryParams.storeId" class="!w-210px" clearable placeholder="请输入门店名称或Id" />
</el-form-item>
<el-form-item label="创建时间" prop="creatTime">
<el-date-picker v-model="state.queryParams.creatTime" type="datetimerange" class="!w-350px"
start-placeholder="开始时间" end-placeholder="结束时间" value-format="x" />
</el-form-item>
<el-form-item>
<el-button @click="getList">
<Icon class="mr-5px" icon="ep:search" />
搜索
</el-button>
<el-button @click="resetQuery">
<Icon class="mr-5px" icon="ep:refresh" />
重置
</el-button>
</el-form-item>
</el-form>
</ContentWrap>
<!-- 列表 -->
<ContentWrap>
<el-table :data="state.list" ref="multipleTableRef" :cell-style="{ 'text-align': 'center' }"
:header-cell-style="{ 'text-align': 'center' }">
<el-table-column :show-overflow-tooltip="true" type="index" label="序号" width="80" />
<el-table-column :show-overflow-tooltip="true" label="商品信息" prop="productListName" />
<el-table-column :show-overflow-tooltip="true" label="门店名称" prop="storeName" />
<el-table-column :show-overflow-tooltip="true" label="打印价格(元)" prop="printPrice" />
<el-table-column :show-overflow-tooltip="true" label="打印数量" prop="printCount" />
<el-table-column :show-overflow-tooltip="true" label="供应商" prop="providerName" />
<el-table-column :show-overflow-tooltip="true" label="商品重量(g)" prop="netWeight" />
<el-table-column :show-overflow-tooltip="true" label="生产保质期" width="250">
<template #default="{ row }">
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="保存条件" prop="preserve" />
<el-table-column :show-overflow-tooltip="true" label="创建信息" prop="cwcAbbr">
<template #default="{ row }">
</template>
</el-table-column>
<el-table-column :show-overflow-tooltip="true" label="修改信息" prop="cwcAbbr">
<template #default="{ row }">
</template>
</el-table-column>
<el-table-column align="center" label="操作">
<template #default="scope">
<el-button link type="primary" @click="handlePrint(scope.row)">
打印
</el-button>
</template>
</el-table-column>
</el-table>
</ContentWrap>
<!-- 弹窗 -->
<el-dialog v-model="dialogTableVisible" title="打印预览" width="640">
<div id="printTest">
<el-row style="border:1px solid #333;padding:20px;width: 600px;height: 360px;font-size: 16px;" id="printMe">
<el-col :span="24" style="font-size: 26px;font-weight: bold;line-height: 36px;border-bottom: 1px solid #333;">{{
state.formData.productListName }}</el-col>
<el-col :span="16" style="line-height: 26px;padding-top:20px;">
贮存条件：{{ state.formData.preserve }}<br />
生产日期：2024-05-26<br />
保质期至：2024-05-26<br />
供应商：{{ state.formData.providerName }}<br />
</el-col>
<el-col :span="8" style='text-align:right'>
<span style='font-size:36px;line-height:70px;font-weight: bold;'>{{ state.formData.printPrice }}元</span><br />
净含量：{{ state.formData.netWeight }}g±{{ state.formData.weightRange }}g
</el-col>
<el-col :span="24">
<img :src="barcodeImage" alt="Barcode Image" v-if="barcodeImage" />
<canvas id="barcode" ref="barcodeCanvas"
style="width: 560px; height: 100px; margin: 10px auto; display: none"></canvas>
</el-col>
</el-row>
</div>
<template #footer>
<el-button type="primary" @click="printHtml" v-if="barcodeImage">打印</el-button>
</template>
</el-dialog>
</template>
<script lang="ts" setup>
import { ref, reactive, onMounted, nextTick } from 'vue'
import JsBarcode from 'jsbarcode';
import VueHtmlToPaper from 'vue-html-to-paper';
<style scoped>
h1 {
font-weight: 500;
font-size: 2.6rem;
top: -10px;
}
// const message = useMessage()
const state: any = reactive({
// 查询条件
queryParams: {
creatTime: [],
endTime: '',
startTime: '',
pageNo: 1,
pageSize: 10,
},
// 表格查询加载
loading: true,
// 表格总数
total: 0,
// 表格数据
list: [{
productListName: 'asdfasfd'
}],
formData: {},
iframeSrc: ''
})
h3 {
font-size: 1.2rem;
}
.greetings h1,
.greetings h3 {
text-align: center;
/** 重置按钮操作 */
const queryFormRef = ref()
/** 打印预览 */
const barcodeValue = ref("");
const barcodeImage = ref("");
const barcodeCanvas = ref();
const dialogTableVisible = ref(false)
const handlePrint = async (row) => {
dialogTableVisible.value = true
state.formData = row
// state.iframeSrc= await Api.getTask(row.id)
nextTick(() => {
const canvas = barcodeCanvas.value;
JsBarcode('#barcode', '12342234', {
format: "CODE128",
width: 2,
height: 100,
displayValue: true,
});
barcodeImage.value = canvas.toDataURL("image/png");
})
}
@media (min-width: 1024px) {
.greetings h1,
.greetings h3 {
text-align: left;
}
/***打印 */
const printHtml = (params) => {
VueHtmlToPaper.$htmlToPaper("printTest", {
name: '_blank',
specs: [
'fullscreen=yes',
'titlebar=yes',
'scrollbars=yes'
],
styles: [
'https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css',
'https://unpkg.com/kidlat-css/css/kidlat.css'
],
timeout: 1000, // default timeout before the print window appears
autoClose: true, // if false, the window will not close after printing
windowTitle: window.document.title, // override the window title
})
}
</style>
/** 初始化 **/
onMounted(() => {
})
</script>
\ No newline at end of file
src/components/TheWelcome.vue 已删除 100644 → 0
浏览文件 @ d235f65f
<script setup>
import WelcomeItem from './WelcomeItem.vue'
import DocumentationIcon from './icons/IconDocumentation.vue'
import ToolingIcon from './icons/IconTooling.vue'
import EcosystemIcon from './icons/IconEcosystem.vue'
import CommunityIcon from './icons/IconCommunity.vue'
import SupportIcon from './icons/IconSupport.vue'
</script>
<template>
<WelcomeItem>
<template #icon>
<DocumentationIcon />
</template>
<template #heading>Documentation</template>
Vue’s
<a target="_blank" href="https://vuejs.org/">official documentation</a>
provides you with all information you need to get started.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<ToolingIcon />
</template>
<template #heading>Tooling</template>
This project is served and bundled with
<a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
your components and web pages, check out
<a href="https://www.cypress.io/" target="_blank">Cypress</a> and
<a href="https://on.cypress.io/component" target="_blank"
>Cypress Component Testing</a
>.
<br />
More instructions are available in <code>README.md</code>.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<EcosystemIcon />
</template>
<template #heading>Ecosystem</template>
Get official tools and libraries for your project:
<a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
<a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
<a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
<a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
resources, we suggest paying
<a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
a visit.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<CommunityIcon />
</template>
<template #heading>Community</template>
Got stuck? Ask your question on
<a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
<a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
You should also subscribe to
<a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
<a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
twitter account for latest news in the Vue world.
</WelcomeItem>
<WelcomeItem>
<template #icon>
<SupportIcon />
</template>
<template #heading>Support Vue</template>
As an independent project, Vue relies on community backing for its sustainability. You can help
us by
<a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
</WelcomeItem>
</template>
src/components/WelcomeItem.vue 已删除 100644 → 0
浏览文件 @ d235f65f
<template>
<div class="item">
<i>
<slot name="icon"></slot>
</i>
<div class="details">
<h3>
<slot name="heading"></slot>
</h3>
<slot></slot>
</div>
</div>
</template>
<style scoped>
.item {
margin-top: 2rem;
display: flex;
}
.details {
flex: 1;
margin-left: 1rem;
}
i {
display: flex;
place-items: center;
place-content: center;
width: 32px;
height: 32px;
color: var(--color-text);
}
h3 {
font-size: 1.2rem;
font-weight: 500;
margin-bottom: 0.4rem;
color: var(--color-heading);
}
@media (min-width: 1024px) {
.item {
margin-top: 0;
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
}
i {
top: calc(50% - 25px);
left: -26px;
position: absolute;
border: 1px solid var(--color-border);
background: var(--color-background);
border-radius: 8px;
width: 50px;
height: 50px;
}
.item:before {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
bottom: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:after {
content: ' ';
border-left: 1px solid var(--color-border);
position: absolute;
left: 0;
top: calc(50% + 25px);
height: calc(50% - 25px);
}
.item:first-of-type:before {
display: none;
}
.item:last-of-type:after {
display: none;
}
}
</style>
src/main.js
浏览文件 @ acc0d41c
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import './assets/main.css'
createApp(App).mount('#app')
createApp(App).use(ElementPlus).mount('#app')
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或