GuoAnPeng
/
color-titration-web
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

fix: 代码调试: 日期时间, 容器, 溶液, 登录, 用户管理

master
guoapeng 1 week ago
parent
9a083e0d6e
commit
9d20ba124a
6 changed files with 172 additions and 240 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 194
      src/components/container/Item/index.vue
  2. 26
      src/components/solution/Edit/index.vue
  3. 31
      src/views/container/index.vue
  4. 122
      src/views/login/index.vue
  5. 26
      src/views/solution/index.vue
  6. 13
      src/views/user/index.vue

194
src/components/container/Item/index.vue
View File

@ -82,110 +82,96 @@ const onSolutionChange = async () => {
}
</script>
<template>
<div class="liquied-item">
<div class="header">
<div class="solution-select">
<el-select v-model="solutionInfo.solutionId" placeholder="请选择酸液" style="width: 80%" @change="onSolutionChange">
<el-option v-for="item in solutionStore.solutionList" :key="item.id" :label="item.name" :value="item.id" />
</el-select>
</div>
</div>
<div class="content">
<div class="bottle_base">
<img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
</div>
<div class="bottle" :style="solutionStyle">
<img class="content-img" src="@/assets/images/liquied/liquied_bottle.svg" alt="chemical-bottle">
</div>
</div>
<div class="footer">
<div class="footer-content">
<span>{{ solutionInfo.capacityTotal }}mL</span>
</div>
<div class="footer-edit">
<span>已使用</span>
<el-input v-model="solutionInfo.capacityUsed" type="number" @blur="onInputBlur">
<template #append>
mL
</template>
</el-input>
</div>
</div>
</div>
<template lang="pug">
.liquid-item
.header
.solution-select
el-select(v-model="solutionInfo.solutionId", placeholder="请选择酸液", style="width: 80%", @change="onSolutionChange")
el-option(v-for="item in solutionStore.solutionList", :key="item.id", :label="item.name", :value="item.id")
.content
.bottle_base
img.content-img(src="@/assets/images/liquied/liquied_bottle.svg", alt="chemical-bottle")
.bottle(:style="solutionStyle")
img.content-img(src="@/assets/images/liquied/liquied_bottle.svg", alt="chemical-bottle")
.footer
.footer-content
span {{ solutionInfo.capacityTotal }}mL
.footer-edit
span 已使用
el-input(v-model="solutionInfo.capacityUsed", type="number", @blur="onInputBlur")
template(#append)
| mL
</template>
<style scoped>
.liquied-item {
border: 1px solid #ccc;
border-radius: 10px;
width: 200px;
height: 300px;
text-align: center;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.content{
position: relative;
display: flex;
justify-content: center;
}
.bottle_base{
position: relative;
}
.bottle {
position: absolute;
}
.header {
display: flex;
align-items: center;
background: rgba(25, 137, 250, 0.1216);
justify-content: center;
border-radius: 10px 10px 0 0;
padding:10px;
width: 100%;
}
.content-img{
height: 150px;
margin: 10px;
}
.footer-content{
display: flex;
justify-content: center;
}
.footer-edit {
display: flex;
justify-content: space-around;
align-items: center;
padding: 10px 0;
.el-input {
margin-left: 10px;
width: 120px;
}
}
.checked {
text-decoration: line-through;
}
.solution-select{
display:flex;
width: 100%;
height: 25px;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.add-icon{
margin-right: -4px;
}
.button-icon{
height: 25px;
width: 25px;
margin: 3px;
}
.radio-marge{
margin: 10px;
border: 1px solid #e0e0e0;
}
<style lang="stylus" scoped>
.liquid-item
border 1px solid #ccc
border-radius 10px
width 200px
height 300px
text-align center
display flex
flex-direction column
align-items center
justify-content space-between
.content
position relative
display flex
justify-content center
.bottle_base
position relative
.bottle
position absolute
.header
display flex
align-items center
background rgba(25, 137, 250, 0.1216)
justify-content center
border-radius 10px 10px 0 0
padding 10px
width 100%
.content-img
height 150px
margin 10px
.footer-content
display flex
justify-content center
.footer-edit
display flex
justify-content space-around
align-items center
padding 10px 0
.el-input
margin-left 10px
width 120px
.checked
text-decoration line-through
.solution-select
display flex
width 100%
height 25px
justify-content center
align-items center
border-radius 5px
.add-icon
margin-right -4px
.button-icon
height 25px
width 25px
margin 3px
.radio-marge
margin 10px
border 1px solid #e0e0e0
</style>

26
src/components/solution/Edit/index.vue
View File

@ -5,9 +5,9 @@ import { inject, ref } from 'vue'
const emits = defineEmits(['ok', 'cancel'])
const data = inject('currentData')
const data = inject<Solution.SolutionItem>('currentData')
const form = ref<Solution.SolutionItem>({ ...data.value })
const form = ref<Solution.SolutionItem>({ ...(data as any)?.value })
const formRef = ref()
const rules = {
@ -22,7 +22,7 @@ const okHandle = async () => {
if (!valid) {
return
}
if (data.value.id) {
if (data?.value.id) {
await editSols(form.value)
}
else {
@ -40,18 +40,14 @@ const cancel = () => {
}
</script>
<template>
<FtDialog visible :title="data.id ? '编辑' : '新增'" width="30%" :ok-handle="okHandle" @cancel="cancel">
<el-form ref="formRef" label-width="auto" :model="form" :rules="rules">
<el-form-item label="溶液名称" prop="name">
<el-input v-model="form.name" placeholder="请输入溶液名称" />
</el-form-item>
</el-form>
</FtDialog>
<template lang="pug">
FtDialog(visible :title="data?.id ? '编辑' : '新增'" width="30%" :ok-handle="okHandle" @cancel="cancel")
el-form(ref="formRef" label-width="auto" :model="form" :rules="rules")
el-form-item(label="溶液名称" prop="name")
el-input(v-model="form.name" placeholder="请输入溶液名称")
</template>
<style scoped lang="scss">
.el-tag {
margin-right: 5px;
}
<style lang="stylus" scoped>
.el-tag
margin-right 5px
</style>

31
src/views/container/index.vue
View File

@ -32,7 +32,6 @@ const queryContainerList = () => {
const list: Container.ContainerItem[] = res
const solutionList: Container.ContainerItem[] = []
list.forEach((item, index) => {
// 只有8种，不会多也不会少, 多的不要
if (index < 8) {
solutionList.push({
...item,
@ -46,25 +45,17 @@ const queryContainerList = () => {
}
</script>
<template>
<div class="liquid-container">
<liquidItem
v-for="(item, index) in chemicalList"
:key="item.id"
:item-index="index"
:solution-item="item"
@ok="queryContainerList"
/>
</div>
<template lang="pug">
div.liquid-container
liquidItem(v-for="(item, index) in chemicalList", :key="item.id", :item-index="index", :solution-item="item", @ok="queryContainerList")
</template>
<style>
.liquid-container {
display: grid;
grid-template-columns: repeat(4, auto);
grid-template-rows: repeat(1, auto);
gap: 10px ;
justify-content: center;
align-items: center;
}
<style lang="stylus" scoped>
.liquid-container
display: grid
grid-template-columns: repeat(4, auto)
grid-template-rows: repeat(1, auto)
gap: 10px
justify-content: center
align-items: center
</style>

122
src/views/login/index.vue
View File

@ -41,76 +41,58 @@ const loginHandle = async () => {
}
</script>
<template>
<div class="login-box">
<div class="login-box-content">
<img :src="logo" alt="">
<div class="title">
长春黄金研究院有限公司
</div>
<el-form ref="formRef" :model="sys.loginForm" :rules="rules" style="width: 100%">
<div class="input-title">
用户名
</div>
<el-form-item>
<el-input v-model="sys.loginForm.username" size="large" placeholder="请输入用户名">
<template #prepend>
<img class="input-icon" :src="user" alt="">
</template>
</el-input>
</el-form-item>
<div class="input-title">
密码
</div>
<el-form-item>
<el-input v-model="sys.loginForm.password" size="large" placeholder="请输入密码" type="password">
<template #prepend>
<img class="input-icon" :src="password" alt="">
</template>
</el-input>
</el-form-item>
<el-form-item>
<ft-button type="primary" style="width: 100%; margin: 20px 0 0;" :click-handle="loginHandle">
登录
</ft-button>
</el-form-item>
</el-form>
</div>
</div>
<template lang="pug">
.login-box
.login-box-content
img(:src="logo", alt="")
.title 长春黄金研究院有限公司
el-form(ref="formRef", :model="sys.loginForm", :rules="rules", style="width: 100%")
.input-title 用户名
el-form-item
el-input(v-model="sys.loginForm.username", size="large", placeholder="请输入用户名")
template(#prepend)
img.input-icon(:src="user", alt="")
.input-title 密码
el-form-item
el-input(v-model="sys.loginForm.password", size="large", placeholder="请输入密码", type="password")
template(#prepend)
img.input-icon(:src="password", alt="")
el-form-item
ft-button(type="primary", style="width: 100%; margin: 20px 0 0;", :click-handle="loginHandle")
| 登录
</template>
<style scoped lang="scss">
.login-box {
background: url("assets/images/login.svg") no-repeat center;
display: flex;
justify-content: center;
align-items: center;
.login-box-content {
padding: 50px 50px;
background: linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%);
border-radius: 10px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.05);
img {
width: 50px;
}
.title{
color: #8799AB;
font-weight: 500;
font-size: 18px;
margin: 15px 0 30px;
}
}
}
.input-icon {
width: 15px !important;
}
.input-title {
font-size: 14px;
color: #2C3E59;
margin-bottom: 10px;
}
<style lang="stylus" scoped>
.login-box
background url("assets/images/login.svg") no-repeat center
display flex
justify-content center
align-items center
.login-box-content
padding 50px 50px
background linear-gradient(180deg, rgba(250, 252, 255, 0.51) 0%, rgba(255, 255, 255, 0.52) 100%)
border-radius 10px
display flex
flex-direction column
justify-content center
align-items center
box-shadow 0 0 10px rgba(0, 0, 0, 0.05)
img
width 50px
.title
color #8799AB
font-weight 500
font-size 18px
margin 15px 0 30px
.input-icon
width 15px !important
.input-title
font-size 14px
color #2C3E59
margin-bottom 10px
</style>

26
src/views/solution/index.vue
View File

@ -87,26 +87,8 @@ const btnList = [
]
</script>
<template>
<div>
<ft-table ref="tableRef" has-page has-header :columns="columns" :btn-list="btnList" :get-data-fn="getSolsList" @add="addSolution" @edit="editSolution" @del="delSolution" />
<Edit v-if="visible" @ok="okHandle" @cancel="visible = false" />
</div>
<template lang="pug">
div
ft-table(ref="tableRef", has-page, has-header, :columns="columns", :btn-list="btnList", :get-data-fn="getSolsList", @add="addSolution", @edit="editSolution", @del="delSolution")
Edit(v-if="visible", @ok="okHandle", @cancel="visible = false")
</template>
<style scoped>
.add-content{
height: 50px;
display: flex;
align-items: center;
}
.footer{
display: flex;
justify-content: center;
align-items: center;
height: 4rem;
}
.craft-tag{
display: flex;
}
</style>

13
src/views/user/index.vue
View File

@ -77,13 +77,8 @@ const editHandle = (data: any) => {
}
</script>
<template>
<div>
<FtTable ref="tableRef" has-header has-page :columns="columns" :btn-list="btnList" :get-data-fn="userList" @add="addHandle" @edit="editHandle" @del="del" />
<Edit v-if="addVisible" :data="currentData" @ok="addVisible = false;tableRef?.initData()" @cancel="addVisible = false" />
</div>
<template lang="pug">
div
FtTable(ref="tableRef", has-header, has-page, :columns="columns", :btn-list="btnList", :get-data-fn="userList", @add="addHandle", @edit="editHandle", @del="del")
Edit(v-if="addVisible", :data="currentData", @ok="addVisible = false;tableRef?.initData()", @cancel="addVisible = false")
</template>
<style scoped lang="scss">
</style>
Write Preview
Loading…
Cancel
Save