Compare commits

..

No commits in common. "3b532d153deaa9f66188360a3d7d15202c7d1374" and "56e545edf53fb6566ee1e0ccd987072aa67327ba" have entirely different histories.

7 changed files with 151 additions and 355 deletions

View File

@ -52,12 +52,3 @@ export function confirmBack(id){
method: 'get'
})
}
// 采购入库
export function inWare(data){
return request({
url: preUrl + "/inWare",
method: 'post',
data
})
}

View File

@ -8,7 +8,6 @@
<script>
import {getStaffList} from "@/api/company/staff";
import {getUserProfile} from "@/api/system/user";
export default {
name: "StaffChoose",
@ -20,9 +19,6 @@ export default {
type: String,
default: '',
required: false
},
roleCode:{
type: String,
}
},
data() {
@ -51,23 +47,14 @@ export default {
},
mounted() {
this.listStaff()
this.getNow()
},
methods: {
async listStaff() {
this.selectLoading = true
try {
if (!this.isGet) return;
if (this.roleCode){
// todo
}else {
const res = await getStaffList(this.query)
this.staffList = res.data
if (this.query){
this.staffSelected = this.staffList.filter(item => item.tel === this.query)[0].id
this.query = null
}
}
const res = await getStaffList(this.query)
this.staffList = res.data
} finally {
this.selectLoading = false
}
@ -75,11 +62,6 @@ export default {
changeQuery(val) {
this.query = val
this.listStaff()
},
async getNow(){
//
const res = await getUserProfile()
this.changeQuery(res.data.mobile)
}
}
}

View File

@ -108,9 +108,9 @@
<el-button size="mini" type="text" icon="el-icon-view" @click="handleShow(scope.row)"
>查看
</el-button>
<el-button @click="handleInWares(scope.row)" v-if="scope.row.soStatus === '02'" size="mini" type="text" icon="el-icon-edit-outline"
>入库
</el-button>
<!-- <el-button size="mini" type="text" icon="el-icon-edit-outline"-->
<!-- >修改-->
<!-- </el-button>-->
<el-button size="mini" type="text" icon="el-icon-close" @click="handleVoidSo(scope.row)"
>作废
</el-button>
@ -123,33 +123,6 @@
/>
<SoShow :so-by-type="soByType" :is-back="isBack" ref="soShow" />
<el-dialog title="入库" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
<el-table v-loading="inLoading" :data="inItems" :stripe="true" :show-overflow-tooltip="true"
@selection-change="selectRow"
@cell-mouse-enter="handleCellEnter"
@cell-mouse-leave="handleCellLeave"
@cell-click="handleCellClick"
:key="tableKey"
>
<el-table-column type="selection" width="55" align="center"/>
<el-table-column label="商品名称" align="center" prop="repairWares.name" />
<el-table-column label="商品编码" align="center" prop="repairWares.code" width="180" />
<el-table-column label="条形码" align="center" prop="repairWares.barCode" width="180" />
<el-table-column label="规格" align="center" prop="repairWares.model" width="180" />
<el-table-column label="采购数量" align="center" prop="goodsCount" width="150" />
<el-table-column label="入库数量" align="center" prop="inCount" width="150">
<div class="item" slot-scope="scope">
<el-input @blur="save(scope.row)" class="item__input" v-model="scope.row.inCount"/>
<span class="item__txt">{{ scope.row.inCount }}</span>
</div>
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" :disabled="selectRows.length === 0" @click="doInWares">确定</el-button>
<el-button @click="dialogVisible = false">取消</el-button>
</div>
</el-dialog>
</div>
</template>
@ -159,10 +132,8 @@ import SupplierChoose from "@/views/repair/Components/SupplierChoose.vue";
import CorpChoose from "@/views/repair/Components/CorpChoose.vue";
import StaffChoose from "@/views/repair/Components/StaffChoose.vue";
import {DICT_TYPE} from "@/utils/dict";
import {getRepairSoPage, voidSo, getRepairSoById, inWare} from "@/api/repair/stockOperate/stockOperate";
import {getRepairSoPage, voidSo, getRepairSoById} from "@/api/repair/stockOperate/stockOperate";
import SoShow from "@/views/repair/stockOperate/Components/SoSow.vue";
import {getRepairSoiByIds} from "@/api/repair/stockOperate/stockOperateItem";
import {createUniqueCodeByHead} from "@/utils/createUniqueCode";
export default {
name: "SoIndex",
@ -232,19 +203,7 @@ export default {
showSearch: true,
list: [],
loading: false,
total: 0,
dialogVisible: false,
inItems: [],
inLoading: false,
selectRows: [],
inWaresFormData:{
id: null,
soiList: [],
soNo: null
},
editProp: ['inCount'],
clickCellMap: {},
tableKey: 0
total: 0
}
},
mounted() {
@ -324,136 +283,11 @@ export default {
async handleShow(row){
const res = await getRepairSoById(row.id)
await this.$refs.soShow.open(res.data)
},
//
async handleInWares(row){
this.inWaresFormData = {
id: null,
soiList: []
}
this.inWaresFormData['id'] = row.id
try {
this.dialogVisible = true
this.inLoading = true
const resRow = await getRepairSoById(row.id)
const ids = resRow.data.goodsList.map(item => item.id)
const res = await getRepairSoiByIds(ids)
this.inItems = res.data
this.inItems = this.inItems.filter(item => item.inCount !== item.goodsCount)
this.inItems = [...this.inItems.map(item => {
return {
...item,
goodsCount: item.goodsCount - item?.inCount | 0,
inCount: item.goodsCount - item?.inCount | 0
}
})]
}finally {
this.inLoading = false
}
},
selectRow(val){
this.selectRows = val
},
async doInWares(){
try {
this.inWaresFormData.soiList = this.selectRows
this.inWaresFormData.soNo = createUniqueCodeByHead("RC")
this.inLoading = true
await inWare(this.inWaresFormData)
this.dialogVisible = false
this.$modal.msgSuccess("入库成功")
await this.pageSo()
}catch{}
},
/** 鼠标移入cell */
handleCellEnter(row, column, cell, event) {
const property = column.property
if (row.id && this.editProp.includes(property)) {
cell.querySelector('.item__txt').classList.add('item__txt--hover')
}
},
/** 鼠标移出cell */
handleCellLeave(row, column, cell, event) {
const property = column.property
if (row.id && this.editProp.includes(property)) {
cell.querySelector('.item__txt').classList.remove('item__txt--hover')
}
},
/** 点击cell */
handleCellClick(row, column, cell, event) {
const property = column.property
if (this.editProp.includes(property)) {
if (!row.id || property !== 'goods') {
// cell
this.saveCellClick(row, cell)
cell.querySelector('.item__txt').style.display = 'none'
cell.querySelector('.item__input').style.display = 'inline'
cell.querySelector('input').focus()
}
}
},
/** 取消编辑状态 */
cancelEditable(cell) {
cell.querySelector('.item__txt').style.display = 'inline'
cell.querySelector('.item__input').style.display = 'none'
},
/** 保存进入编辑的cell */
saveCellClick(row, cell) {
const id = row.id
if (this.clickCellMap[id] !== undefined) {
if (!this.clickCellMap[id].includes(cell)) {
this.clickCellMap[id].push(cell)
}
} else {
this.clickCellMap[id] = [cell]
}
},
/** 保存数据 */
save(row) {
const id = row.id
// cell
this.clickCellMap[id].forEach(cell => {
this.cancelEditable(cell)
})
this.clickCellMap[id] = []
this.tableKey++
this.selectRows = []
},
}
}
}
</script>
<style scoped lang="scss">
.item {
.item__input {
display: none;
width: 100px;
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__inner {
height: 24px !important;
}
/* 调整elementUI中样式 如果不需要调整请忽略 */
.el-input__suffix {
i {
font-size: 12px !important;
line-height: 26px !important;
}
}
}
.item__txt {
box-sizing: border-box;
border: 1px solid transparent;
width: 100px;
line-height: 24px;
padding: 0 8px;
}
.item__txt--hover {
border: 1px solid #dddddd;
border-radius: 4px;
cursor: text;
}
}
</style>

View File

@ -21,15 +21,15 @@
</template>
</el-table-column>
<el-table-column label="单据号" align="center" prop="no" width="200"/>
<el-table-column label="客户车牌" align="center" prop="licenseNumber"/>
<el-table-column label="服务顾问" align="center" prop="adviserName"/>
<el-table-column label="申请人" align="center" prop="repairName"/>
<el-table-column label="客户车牌" align="center" prop="licenseNumber" />
<el-table-column label="服务顾问" align="center" prop="adviserName" />
<el-table-column label="申请人" align="center" prop="repairName" />
<el-table-column label="状态" align="center" prop="status">
<template slot-scope="scope">
<dict-tag :type="DICT_TYPE.TICKET_WARES_STATUS" v-model="scope.row.status"/>
<dict-tag :type="DICT_TYPE.TICKET_WARES_STATUS" v-model="scope.row.status" />
</template>
</el-table-column>
<el-table-column label="备注" align="center" prop="remark"/>
<el-table-column label="备注" align="center" prop="remark" />
<el-table-column label="操作" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleDispose(scope.row)" icon="el-icon-edit">
@ -55,7 +55,7 @@
@selection-change="handleSelect"
:key="tableKey"
>
<el-table-column type="selection" width="80" align="center"/>
<el-table-column type="selection" width="80" align="center" />
<el-table-column label="名称" align="center" prop="waresName" :show-overflow-tooltip="true"/>
<el-table-column label="规格" align="center" prop="wares.model" width="180"/>
<el-table-column label="领料数量" v-if="type" align="center" prop="waresCount" width="180">
@ -76,12 +76,10 @@
</el-table-column>
</el-table>
<div slot="footer" class="dialog-footer">
<el-button type="primary" v-if="type" @click="handlePass"
:disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
<el-button type="primary" v-if="type" @click="handlePass" :disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
通知领料
</el-button>
<el-button type="primary" v-else @click="handlePass"
:disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
<el-button type="primary" v-else @click="handlePass" :disabled="selections.length === 0 || selections.filter(item => !item.isStock).length !== 0">
通知退料
</el-button>
<el-button v-if="type" type="primary" @click="handleCreate" :disabled="selections.length === 0">
@ -92,14 +90,14 @@
<el-dialog title="采购单" :visible.sync="inStockDialog" width="80%" v-dialogDrag append-to-body>
<el-table
:data="partList"
:stripe="true"
:show-overflow-tooltip="true"
show-summary
:summary-method="getSummaries"
@cell-mouse-enter="handleCellEnter"
@cell-mouse-leave="handleCellLeave"
@cell-click="handleCellClick"
:data="partList"
:stripe="true"
:show-overflow-tooltip="true"
show-summary
:summary-method="getSummaries"
@cell-mouse-enter="handleCellEnter"
@cell-mouse-leave="handleCellLeave"
@cell-click="handleCellClick"
>
<el-table-column label="序号" align="center">
<template scope="scope">
@ -165,7 +163,7 @@
</el-col>
</el-row>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="handleSubmit">确定</el-button>
<el-button type="danger" @click="handleSubmit">结算</el-button>
</div>
</el-dialog>
</div>
@ -184,12 +182,12 @@ import {getUserProfile} from "@/api/system/user";
export default {
name: "WaresItem",
components: {WarehouseChoose, SoTable},
props: {
props:{
type: Boolean,
},
data() {
return {
queryParams: {
data(){
return{
queryParams:{
pageNo: 1,
pageSize: 10,
query: null,
@ -198,13 +196,13 @@ export default {
},
showSearch: true,
loading: false,
list: [],
list:[],
total: 0,
dialogVisible: false,
items: [],
items:[],
dialogLoading: false,
selections: [],
formData: {},
selections:[],
formData:{},
inStockDialog: false,
partList: [],
includeColumn: ['count', 'totalPrice'],
@ -219,75 +217,86 @@ export default {
mounted() {
this.getList()
},
methods: {
methods:{
// truefalse
async handlePass() {
async handlePass(){
// 退
this.formData.repairSo = {
soType: this.type ? "02" : "04",
soNo: createUniqueCodeByHead(this.type ? "LL" : "TL"),
userId: this.formData.repairId,
userName: this.formData.repairName,
soTime: parseTime(Date.now(), '{y}-{m}-{d}'),
soStatus: this.type ? "04" : "07",
// purchaseType: "01"
}
this.formData.repairSois = [...this.selections.map(item => {
return {
soiType: this.type ? '02' : "04",
goodsId: item.waresId,
goodsCount: item.waresCount,
this.formData.repairSo = {
soType: this.type ? "02" : "04",
soNo: createUniqueCodeByHead(this.type ? "LL" : "TL"),
userId: this.formData.repairId,
userName: this.formData.repairName,
soTime: parseTime(Date.now(), '{y}-{m}-{d}'),
soStatus: this.type ? "04" : "07",
// purchaseType: "01"
}
})]
if (this.type) {
this.formData.items = [...this.selections.map(item => {
this.formData.repairSois = [...this.selections.map(item => {
return {
id: item.id,
soiType: this.type ? '02' : "04",
goodsId: item.waresId,
goodsCount: item.waresCount,
}
})]
if (this.type){
this.formData.items = [...this.selections.map(item => {
return {
id: item.id,
}
})]
}
try {
await pass(this.formData)
this.$modal.msgSuccess("处理成功")
await this.getList()
}finally {
this.dialogVisible = false
}
},
// truefalse
async handleCreate(flag){
this.inStockDialog = true
if (flag){
this.partList = [...this.items.map(item => {
return {
...item.wares,
count: item.waresCount,
newPrice: item.wares.purPrice,
totalPrice: item.waresCount * item.wares.purPrice
}
})]
}else {
this.partList = [...this.selections.map(item => {
return {
...item.wares,
count: item.waresCount,
newPrice: item.wares.price,
totalPrice: item.waresCount * item.wares.price
}
})]
}
try {
await pass(this.formData)
this.$modal.msgSuccess("处理成功")
await this.getList()
} finally {
this.dialogVisible = false
}
},
// truefalse
async handleCreate() {
this.inStockDialog = true
this.partList = [...this.selections.map(item => {
return {
...item.wares,
count: item.waresCount,
newPrice: item.wares.purPrice,
totalPrice: item.waresCount * item.wares.purPrice
}
})]
this.dialogVisible = false
},
async getList() {
async getList(){
try {
this.loading = true
const res = await getPage(this.queryParams)
if (res.data) {
if (res.data){
this.list = res.data.records
this.total = res.data.total
}
} finally {
}finally {
this.loading = false
}
},
handleQuery() {
handleQuery(){
this.queryParams.pageNo = 1
this.getList()
},
resetQuery() {
resetQuery(){
this.resetForm('queryForm')
this.handleQuery()
},
async handleDispose(row) {
async handleDispose(row){
this.formData = {}
this.formData = {
...row
@ -299,25 +308,25 @@ export default {
const res = await listTwItem(data)
this.items = res.data
this.items.forEach(item => {
const count = item.waresAlreadyCount ? parseInt(item.waresCount) - parseInt(item.waresAlreadyCount) : item.waresCount
item.waresCount = this.type ? count : item.waresAlreadyCount
item.isStock = this.type ? count <= item.wares.stock : true
})
const count = item.waresAlreadyCount ? parseInt(item.waresCount) - parseInt(item.waresAlreadyCount) : item.waresCount
item.waresCount = this.type ? count : item.waresAlreadyCount
item.isStock = this.type ? count <= item.wares.stock : true
})
this.items = this.items.filter(item => this.type ? item.waresStatus === '02' : item.waresAlreadyCount)
if (!this.type) {
if (!this.type){
this.items = this.items.filter(item => item.waresAlreadyCount !== item.waresBackCount)
}
} finally {
}finally {
this.dialogLoading = false
}
},
getRowClass(row) {
if (this.type && !row.row.isStock) {
getRowClass(row){
if (this.type && !row.row.isStock){
return 'stock'
}
return ''
},
handleSelect(row) {
handleSelect(row){
this.selections = row
},
//
@ -388,10 +397,8 @@ export default {
/** 保存数据 */
save(row) {
//
if (row.wares) {
row.isStock = this.type ? row.waresCount <= row.wares.stock : row.waresCount <= row.waresAlreadyCount
}
if (!this.type && !row.isStock) {
row.isStock = this.type ? row.waresCount <= row.wares.stock : row.waresCount <= row.waresAlreadyCount
if (!this.type && !row.isStock){
this.$modal.msgWarning("退料数量不能超过领取数量")
row.waresCount = row.waresAlreadyCount
}
@ -417,18 +424,18 @@ export default {
this.partList.splice(index, 1)
},
//
async handleSubmit() {
async handleSubmit(){
try {
await this.createInit()
await createRepairSo(this.formData)
this.inStockDialog = false
this.$modal.msgSuccess("新增成功")
await this.getList()
} catch {
}catch{
}
},
//
async createInit() {
async createInit(){
const res = await getUserProfile()
this.formData = {}
this.formData = {
@ -439,10 +446,8 @@ export default {
userName: res.data.nickname,
soTime: parseTime(Date.now(), '{y}-{m}-{d}'),
itemCount: this.partList.length,
totalPrice: this.partList.reduce((x, y) => {
return x + y.totalPrice
}, 0),
soStatus: "02",
totalPrice: this.partList.reduce((x, y) => {return x + y.totalPrice}, 0),
soStatus: "03",
remark: this.remark,
}
this.formData.goodsList = [...this.partList.map(item => {
@ -462,10 +467,9 @@ export default {
</script>
<style scoped lang="scss">
::v-deep .el-table .stock td {
::v-deep .el-table .stock td{
color: #ff0000 !important; /* 红色背景 */
}
.item {
.item__input {
display: none;

View File

@ -14,17 +14,16 @@
end-placeholder="结束日期">
</el-date-picker>
</el-form-item>
<el-form-item v-if="TicketType === 'tp'" label="服务顾问" prop="userId">
<StaffChoose/>
<el-form-item v-if="TicketType === 'tp'" label="服务顾问" prop="userId">
<StaffChoose />
</el-form-item>
<el-form-item v-if="TicketType === 'tu'" label="维修类别" prop="repairType">
<el-select v-model="queryParams.repairType" size="small">
<el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_TYPE)" :key="item.value" :label="item.label"
:value="item.value"/>
<el-option v-for="item in this.getDictDatas(DICT_TYPE.REPAIR_TYPE)" :key="item.value" :label="item.label" :value="item.value" />
</el-select>
</el-form-item>
<el-form-item v-if="TicketType === 'tp'" label="类型" prop="repairType">
<RepairTypeChoose @selected="getRepairType"/>
<RepairTypeChoose @selected="getRepairType" />
</el-form-item>
<el-form-item label="门店" prop="corpId">
<CorpChoose v-model="queryParams.corp"/>
@ -42,9 +41,8 @@
</el-col>
<right-toolbar :showSearch.sync="showSearch"></right-toolbar>
</el-row>
<TicketTable :ticket-type="TicketType" :list="list" @setVoid="getPage" :is-w-x-c-w="isCW"/>
<pagination @pagination="getPage" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo"
:limit.sync="queryParams.pageSize"
<TicketTable :ticket-type="TicketType" :list="list" @setVoid="getPage" :is-w-x-c-w="isWXCW"/>
<pagination @pagination="getPage" v-show="total > 0" :total="total" :page.sync="queryParams.pageNo" :limit.sync="queryParams.pageSize"
/>
</div>
</template>
@ -65,8 +63,8 @@ export default {
RepairTypeChoose,
CorpChoose
},
props: {
TicketType: {
props:{
TicketType:{
type: String,
defaultValue: 'tp',
required: true
@ -74,7 +72,7 @@ export default {
},
data() {
return {
queryParams: {
queryParams:{
pageNo: 1,
pageSize: 10,
ticketsStatus: null,
@ -87,30 +85,25 @@ export default {
showSearch: true,
total: 0,
list: [],
isCW: false
isWXCW: false
}
},
mounted() {
this.getPage()
this.getIsCW()
this.getIsWXCW()
},
methods: {
//
async getIsCW() {
const kjRes = await checkRole("kj")
if (kjRes.data) {
this.isCW = kjRes.data
} else {
const cnRes = await checkRole("cn")
this.isCW = cnRes.data
}
async getIsWXCW(){
const res = await checkRole("wxcw")
this.isWXCW = res.data
},
//
getRepairType(data) {
getRepairType(data){
console.log(data)
},
async getPage() {
switch (this.TicketType) {
async getPage(){
switch (this.TicketType){
case "tu":
this.queryParams.ticketsStatus = "01"
break
@ -128,11 +121,11 @@ export default {
this.list = res.data.records
this.total = res.data.total
},
handleQuery() {
handleQuery(){
this.queryParams.pageNo = 1
this.getPage()
},
handleReset() {
handleReset(){
this.resetForm("queryForm")
this.queryParams.corp = null
this.handleQuery()

View File

@ -104,7 +104,7 @@
<el-button size="mini" type="text" icon="el-icon-view" @click="handleShow(scope.row)"
>查看
</el-button>
<el-button v-if="TicketType === 'tu' && isWXCW && scope.row.isFinish === '1'" size="mini" type="text" icon="el-icon-finished"
<el-button v-if="TicketType === 'tu' && isWXCW && !scope.row.payType" size="mini" type="text" icon="el-icon-finished"
@click="handlePaid(scope.row)"
>结算
</el-button>

View File

@ -1,6 +1,6 @@
<template>
<div class="app-container">
<el-dialog title="客户信息" ref="dialogRef" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body v-loading="dialogLoading">
<el-dialog title="客户信息" :visible.sync="dialogVisible" width="80%" v-dialogDrag append-to-body>
<el-form size="small" ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading"
label-width="100px">
<el-collapse v-model="activeNames">
@ -68,16 +68,16 @@
</el-form-item>
</el-col>
</el-row>
<!-- <el-row :gutter="2">-->
<!-- <el-col :span="12">-->
<!-- <el-form-item label="选择会员" prop="userInfo.memberLevelId">-->
<!-- <el-select v-model="formData.userInfo.memberLevelId" placeholder="请选择会员">-->
<!-- <el-option v-for="(item,index) in levelList" :key="item.id"-->
<!-- :label="item.name" :value="item.id"/>-->
<!-- </el-select>-->
<!-- </el-form-item>-->
<!-- </el-col>-->
<!-- </el-row>-->
<el-row :gutter="2">
<el-col :span="12">
<el-form-item label="选择会员" prop="userInfo.memberLevelId">
<el-select v-model="formData.userInfo.memberLevelId" placeholder="请选择会员">
<el-option v-for="(item,index) in levelList" :key="item.id"
:label="item.name" :value="item.id"/>
</el-select>
</el-form-item>
</el-col>
</el-row>
<el-row>
<el-col :span="24">
<el-form-item label="联系地址" prop="userInfo.address">
@ -318,34 +318,26 @@ export default {
sexDictDatas: getDictDatas(DICT_TYPE.DICT_SYS_USER_SEX),
cusBusiTypeDictDatas: getDictDatas(DICT_TYPE.DICT_CUS_BUSI_TYPE),
buttonLoading: false,
dialogLoading: null,
}
},
methods: {
async open(data) {
this.dialogVisible = true
try {
this.reset()
// this.dialogLoading = this.$loading({
// target: this.$refs.dialogRef.$el
// })
if (data?.userInfo?.id){
this.formData.userInfo = {
...this.formData.userInfo,
...data.userInfo
}
this.reset()
if (data?.userInfo?.id){
this.formData.userInfo = {
...this.formData.userInfo,
...data.userInfo
}
if (data?.carInfo?.id){
this.formData.carInfo = {
...this.formData.carInfo,
...data.carInfo,
brandAndModel: [data.carInfo?.carBrand, data.carInfo?.carModel]
}
}
// await this.listLevel()
}finally {
// this.dialogLoading.close()
}
if (data?.carInfo?.id){
this.formData.carInfo = {
...this.formData.carInfo,
...data.carInfo,
brandAndModel: [data.carInfo?.carBrand, data.carInfo?.carModel]
}
}
await this.listLevel()
this.dialogVisible = true
},
async compute(){
this.buttonLoading = true