基于Vue3 setup单文件组件实例

最新推荐文章于 2024-06-19 15:06:30 发布

Zhouyuding_yyds

最新推荐文章于 2024-06-19 15:06:30 发布

阅读量2.1k

点赞数 6

文章标签： elementui javascript vue.js

本文链接：https://blog.csdn.net/Zhouyuding_yyds/article/details/125262009

版权

<div >

<EdaSearch

v-show="showSearch"

:SeacrhConditions="searchOptions"

@onSubmit="handleQuery"

@onReset="resetQuery"

style="margin-bottom: 16px;"

</EdaSearch>

<!-- <EdaOptTool>

<el-button type="primary" class="btn" @click="handleAdd">

</el-button>

</template>

</EdaOptTool> -->

<el-table v-loading="loading" :data="configList">

<el-table-column label="账单编号" align="left" prop="soNo" width="100">

<el-popover

trigger="hover"

:content="scope.row.soNo"

<el-button type="text" @click="handleDetail(scope.row)"> {{filter(scope.row.soNo)}}</el-button>

</template>

</el-popover>

</template>

</el-table-column>

<el-table-column label="供应商" align="left" width="120">

</template>

</el-table-column>

<el-table-column label="服务类型" align="left" prop="currency" width="100">

</template>

</el-table-column>

<el-table-column label="账单周期" align="left" prop="startRegionName" width="100">

</template>

</el-table-column>

<el-table-column label="时间范围" align="left" prop="endRegionName">

</template>

</el-table-column>

<el-table-column label="已确认|总明细" align="left" width="120">

<div>{{ scope.row.supplierName || "-"}}</div>

<div>{{ scope.row.shipownerName || "-"}}</div>

</template>

</el-table-column>

<el-table-column label="账单金额" align="left" width="100">

</template>

</el-table-column>

<el-table-column label="已核销金额" align="left" prop="currency" width="100">

</template>

</el-table-column>

<el-table-column label="待付款金额" align="left" prop="endRegionName" width="100">

</template>

</el-table-column>

<el-table-column label="创建时间" align="center" prop="currency">

</template>

</el-table-column>

<el-table-column label="应付日期" align="center" prop="currency">

</template>

</el-table-column>

<el-table-column :label="$t('common.status')" align="center" prop="status">

<dict-tag :options="resource_pool_status" :value="scope.row.status" />

</template>

</el-table-column>

<el-table-column :label="$t('common.operation')" fixed="right" align="left" width="150" class-name="small-padding fixed-width">

<el-button

type="text"

@click="handleEdit(scope.row)"

v-hasPermi="['system:post:edit']"

>{{$t('common.edit')}}</el-button>

<el-button

type="text"

@click="handleOffer(scope.row)"

v-hasPermi="['system:post:edit']"

>申请付款</el-button>

<el-button

type="text"

v-hasPermi="['system:post:edit']"

>导出</el-button>

<el-button

type="text"

v-hasPermi="['system:post:edit']"

>回退</el-button>

</template>

</el-table-column>

</el-table>

<pagination

v-show="total > 0"

:total="total"

v-model:page="queryParams.pageNum"

v-model:limit="queryParams.pageSize"

@pagination="getList"

</EdaCard>

<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false">

<el-form :model="form" ref="offerRef" :rules="rules" v-loading="loading">

<el-row>

<el-col :span="12">

<el-form-item :label="$t('pool.estimatedDepartureTime') + ':'" prop="departureTime">

<span>{{$filter.date(form.departureTime) || '-'}}</span>

</el-form-item>

</el-col>

<el-col :span="12">

<el-form-item label="S/O NO.:" prop="soNo">

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="12">

<el-form-item :label="$t('pool.shipName') + ':'" prop="shipName">

<span>{{form.shipName || '-'}}</span>

</el-form-item>

</el-col>

<el-col :span="12">

<el-form-item label="可用库存:" prop="availableStock">

<span>{{form.availableStock || '-'}}</span>

</el-form-item>

</el-col>

</el-row>

<el-row>

<el-col :span="12">

<el-form-item :label="$t('common.currency') + ':'" prop="currency">

<el-select v-model="form.currency" placeholder="请选择" clearable >

<el-option

v-for="dict in currency_code"

:key="dict.value"

:label="dict.label"

:value="dict.value"

</el-select>

</el-form-item>

</el-col>

</el-row>

</el-form>

<el-table v-loading="loading" :data="creditLimiList">

<el-table-column :label="$t('common.cubeType')" align="center" prop="boxSize" width="100">

<dict-tag :options="box_size" :value="scope.row.boxSize" />

</template>

</el-table-column>

<el-table-column :label="$t('pool.itemName')" align="center" prop="billingId" width="180">

<el-select v-model="scope.row.billingId" >

<el-option

v-for="dict in billingList"

:key="dict.value"

:label="dict.label"

:value="dict.value"

</el-select>

</template>

</el-table-column>

<el-table-column :label="$t('pool.itemCode')" align="center" prop="billingCode">

<el-select v-model="scope.row.billingId" :disabled="true">

<el-option

v-for="dict in billingList"

:key="dict.value"

:label="dict.billingCode"

:value="dict.value"

</el-select>

</template>

</el-table-column>

<el-table-column :label="$t('common.price')" align="center" prop="referencePrice" width="150">

<el-input v-model="scope.row.referencePrice" @input="scope.row.referencePrice = scope.row.referencePrice.replace(/\D*(\d*)(\.?)(\d{0,3})\d*/g,'$1$2$3')" maxlength="11"></el-input>

</template>

</el-table-column>

<el-table-column :label="$t('common.currency')" align="center" prop="currency" >

</el-table-column>

<el-table-column :label="$t('common.operation')" fixed="right" width="100" class-name="small-padding fixed-width">

<el-button @click="deleteRow(scope.$index, creditLimiList)" type="text">{{$t('common.delete')}}</el-button>

</template>

</el-table-column>

</el-table>

<span style="color:#007BFF" >+{{$t('common.add')}}</span>

</div>

<el-button type="primary" @click="submitForm">{{$t('common.save')}}</el-button>

<el-button @click="cancel">{{$t('common.cancel')}}</el-button>

</div>

</template>

</el-dialog>

</div>

</template>

import { getToken } from "@/utils/auth";

import { listResourcePool,supplierSource,lockedInventory,getInquiry,editInquiry,addInquiry,allBilling} from "@/api/resources/pool";

import { useI18n } from "vue-i18n"

import moment from 'moment'

const { t } = useI18n();

const router = useRouter();

const { proxy } = getCurrentInstance();

const { box_size } = proxy.useDict("box_size");

const { resource_pool_status } = proxy.useDict("resource_pool_status");

const { currency_code } = proxy.useDict("currency_code");

/*** 资源池导入参数 */

const upload = reactive({

// 是否显示弹出层（用户导入）

open: false,

// 弹出层标题（用户导入）

title: "",

// 是否禁用上传

isUploading: false,

// 是否更新已经存在的用户数据

updateSupport: 0,

// 设置上传的请求头部

headers: { Authorization: "Bearer " + getToken() },

// 上传的地址

url: import.meta.env.VITE_APP_BASE_API + "/trading/product/resource/pool/import"

});

const optionProps = {

value:'regionId',

label:'regionName',

children:'regionInfoDtoList',

};

const existBillingId = ref(true);

const LockedData = ref([]); //已锁定库存数据

const billingList = ref([]);//计费项数据

const configList = ref([]);

const creditLimiList = ref([]);

const open = ref(false);

const loading = ref(true);

const showSearch = ref(true);

const total = ref(0);

const title = ref("");

const data = reactive({

form: {},

rules: {

currency: [{ required: true, message: '请选择货币类型', trigger: "blur" }],

queryParams: {

pageNum: 1,

pageSize: 10,

soNo: undefined,

startRegionId: undefined,

endRegionId:undefined,

// departureTime: undefined,

// arrivalTime: undefined,

// boxSize:undefined,

shipName: undefined,

// supplierId: undefined,

shipownerId:undefined,

status: undefined,

searchOptions:([

{prop:'soNo', value: '', type:'input', label:'账单编号', col: 1, selectArray:[], },

{prop:'supplierIds', value: '', type:'select', label:t('common.supplier'), col: 1, selectArray:[],multiple:true, },

{prop:'arrivalTime', value: '', type:'dateRange', label:"应付日期", col: 1,valueFormat:'x' },

{prop:'status', value: '', type:'select', label:t('common.status'), col: 1, selectArray:[], },

{prop:'startRegionId', value: '', type:'select', label:"账单周期", col: 1, selectArray:[], },

])

});

const { queryParams, form, rules,searchOptions } = toRefs(data);

//新增

function handleAdd(){

router.push('/product/pool/add/index')

}

//编辑

function handleEdit(row){

const soNo = row.soNo ;

router.push({ path: "/finance/payable/billsPayable/edit/index", query: { soNo: soNo } });

}

//详情

function handleDetail(row){

const soNo = row.soNo ;

router.push({ path: "/finance/payable/billsPayable/detail/index", query: { soNo: soNo } });

}

/** 查询账户列表 */

function getList() {

loading.value = true;

listResourcePool(queryParams.value).then(response => {

configList.value = response.rows;

total.value = response.total;

loading.value = false;

})

.catch(() => {

configList.value = [];

total.value = 0;

loading.value = false;

});

}

/** 取消按钮 */

function cancel() {

open.value = false;

reset();

}

/** 表单重置 */

function reset() {

// proxy.resetForm("customerRef");

}

/** 搜索按钮操作 */

function handleQuery(params) {

queryParams.value.pageNum = 1;

if(params.arrivalTime){

params.arrivalTimeStart = new Date(params.arrivalTime[0]).getTime()

params.arrivalTimeEnd = new Date(params.arrivalTime[1]).getTime()

}

if(!params.arrivalTime){

params.arrivalTimeStart = ''

params.arrivalTimeEnd = ''

}

queryParams.value = {...queryParams.value,...params};

params.pageNum = 1;

getList();

}

/** 重置按钮操作 */

function resetQuery() {

proxy.resetForm("queryRef");

handleQuery();

}

//字符串超出部分显示省略。。。

function filter(value){

if (!value) return '-'

if (value.length > 10) {

return value.slice(0,8) + '...'

}

return value

}

/** 导出操作 */

function handleExport() {

proxy.download("trading/product/resource/pool/export", {

...queryParams.value,

}, `resource_${new Date().getTime()}.xlsx`);

}

/** 申请付款 */

function handleOffer(row) {

form.value = {

customerCode:row.customerCode,

departureTime:row.departureTime,

soNo:row.soNo,

shipName:row.shipName,

startRegionId:row.startRegionId,

endRegionId:row.endRegionId,

supplierId:row.supplierId

}

getInquiry(form.value).then(response => {

creditLimiList.value = response.data.billingDTOList;

open.value = true;

title.value = '申请付款';

});

}

/** 申请付款提交按钮 */

function submitForm() {

creditLimiList.value.forEach(item=>{

item.referencePrice = Number(item.referencePrice)

if(!item.billingId){

existBillingId.value = false //判断计费项是否已选

}

else{

existBillingId.value = true

}

})

let obj = {

billingDTOList: creditLimiList.value,

customerCode:form.value.customerCode,

departureTime:form.value.departureTime,

soNo:form.value.soNo,

shipName:form.value.shipName,

currency:form.value.currency,

boxSize:form.value.boxSize,

availableStock:form.value.availableStock,

shippingResourcePoolId: form.value.shippingResourcePoolId,

startRegionId:form.value.startRegionId,

endRegionId:form.value.endRegionId,

supplierId:form.value.supplierId

}

proxy.$refs["offerRef"].validate(valid =>{

if(valid){

if(!creditLimiList.value.length){

return proxy.$modal.msgError('至少维护一个箱型的单舱报价');

}

if(!existBillingId.value){

return proxy.$modal.msgError('计费项不能为空');

}

if(form.value.addOrEdit === null){

addInquiry(obj).then(response => {

proxy.$modal.msgSuccess(t('common.success'));

open.value = false;

getList();

});

}

else{

editInquiry(obj).then(response => {

proxy.$modal.msgSuccess(t('common.success'));

open.value = false;

getList();

});

}

})

}

/** 删除按钮操作 */

function deleteRow(index, rows) {

rows.splice(index, 1);

}

/** 新增一行 */

function addRow(){

let obj = {

boxSize:form.value.boxSize,

billingId:undefined,

billingCode:undefined,

billingName:undefined,

currency:form.value.currency,

referencePrice:0,

};

creditLimiList.value.push(obj)

}

/** 获取供应商 */

function getSupplier(){

supplierSource().then(response=>{

let supplierData = response

supplierData.forEach(item=>{

item.key = item.supplierId;

item.label = item.supplierName;

item.value = item.supplierId

})

searchOptions.value[1].selectArray = supplierData

})

}

/** 获取已锁定库存 */

function getlockedInventory(el){

let obj = {

// resourcePoolId:"1526160046991126530",

resourcePoolId:el.shippingResourcePoolId

}

lockedInventory(obj).then(response=>{

LockedData.value = response.data

})

}

/** 获取计费项 */

function getBilling(){

allBilling().then(response=>{

let billingData = response

billingData.forEach(item=>{

item.key = item.billingId;

item.label = item.billingNameZh;

item.value = item.billingId

item.billingCode = item.billingCode

})

billingList.value = billingData

})

}

onMounted(() => {

searchOptions.value[4].selectArray = box_size //箱型

searchOptions.value[3].selectArray = resource_pool_status //状态

})

getBilling()

getSupplier();

getList();

</script>

.addstyle{

border: 1px solid #C6CFDC;

border-radius: 4px;

height: 32px;

min-width: 700px;

margin: 14px;

text-align: center;

line-height: 32px;

}

.el-dialog .el-form-item--default {

flex-direction: row;

margin-left: 5px;

}

.boxSize{

display:flex;

/* border-bottom:1px solid #EBF0F5; */

height:100%;

width: 150%;

padding-bottom: 5px;

padding-top: 5px;

}

.referencePriceSize{

display:flex;

/* border-bottom:1px solid #EBF0F5;

height:100%;

width: 150%;

}

</style>

Zhouyuding_yyds

关注

6
点赞
踩
5

收藏

觉得还不错? 一键收藏
0
评论
基于Vue3 setup单文件组件实例

复制链接

扫一扫