Vue：快捷文本
<template>
<div class="app-container" id="commonDiv">
<el-form ref="queryForm" :model="queryParams" :inline="true">
<el-form-item label="供应商名称" prop="mc">
<el-input v-model="" placeholder="供应商名称"/>
</el-form-item>
<el-form-item label="供应商类型" prop="lx">
<el-select v-model="" placeholder="供应商类型">
<el-option v-for="item in lxOperations" :key="" :label="" :value="">
</el-option>
</el-select>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<!-- 图标显示 -->
<el-row>
<el-row :gutter="10">
<el-col :span="1.5">
<el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['jcpz:gyspz:add']">新增</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="success" plain icon="el-icon-edit" size="mini" @click="handleUpdate" :disabled="single" v-hasPermi="['jcpz:gyspz:edit']">修改</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete" :disabled="multiple" v-hasPermi="['jcpz:gyspz:remove']">删除</el-button>
</el-col>
<el-col :span="1.5">
<el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['jcpz:gyspz:export']">导出</el-button>
</el-col>
</el-row>
</el-row>
<!-- 数据展示 -->
<el-table v-loading="loading" :data="dataList" row-key="bbm" :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center' }" @selection-change="handleSelectionChange" style="width: 100%;margin-top:5px" :height="tableHeight">
<el-table-column type="selection" width="50" align="center" />
<el-table-column label="序号" align="center" width="70px">
<template #default="scope">
<span>{{ ( - 1) * () + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="供应商名称" align="center" prop="mc" :show-overflow-tooltip="true" />
<el-table-column label="联系电话" align="center" prop="lxdh" :show-overflow-tooltip="true" />
<el-table-column label="地址" align="center" prop="dz" :show-overflow-tooltip="true" />
<el-table-column label="供应商类型" align="center" prop="lx" :show-overflow-tooltip="true">
<template slot-scope="scope">
<div v-if=" == '0'" style="color: #1c84c6">供应商</div>
<div v-if=" == '1'" style="color: #0ba32f">销售对象</div>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<pagination v-show="total > 0" :total="total" :="" :="" @pagination="getList" />
<!-- 新增 | 修改 弹框 -->
<add-edit ref="addEdit" @success_="getList"></add-edit>
</div>
</template>
<script>
import addEdit from './'
import { listType, infoType, delType } from '@/api/jcpz/gyspz'
export default {
name: 'Gyspz',
components: { addEdit },
data() {
return {
//表格高度
tableHeight: null,
// 遮罩层
loading: false,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 总条数
total: 0,
// 创建时间
dateRange: [],
// 条件查询
queryParams: { pageNum: 1, pageSize: 20, mc: null, lx: null },
// 数据列表
dataList: [],
// 供应商类型
lxOperations: [{label: '供应商', value: '0'}, {label: '销售对象', value: '1'}],
}
},
mounted(){
this.tableHeight = document.getElementById('commonDiv').offsetHeight - 200;
this.getList()
},
methods: {
/**
* 条件查询
*/
getList(){
this.loading = true;
listType(this.addDateRange(this.queryParams, this.dateRange)).then((res) => {
this.dataList = res.rows;
this.total = res.total;
this.loading = false;
})
},
/**
* 新增
*/
handleAdd(){
this.$refs.addEdit.title = '添加供应商信息'
this.$refs.addEdit.lxOperations = this.lxOperations
this.$refs.addEdit.visible = true
},
/**
* 修改
* @param row
*/
handleUpdate(row){
const id = row.bbm || this.ids
infoType(id).then((res) => {
this.$refs.addEdit.title = '修改供应商信息'
this.$refs.addEdit.lxOperations = this.lxOperations
this.$refs.addEdit.form = res.data
this.$refs.addEdit.visible = true
})
},
/**
* 删除
* @param row
*/
handleDelete(row){
const ids = row.bbm || this.ids;
this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function () {
return delType(ids);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => { });
},
/**
* 导出
*/
handleExport(){
this.download('xxx/export', {
...this.queryParams
}, `gyspz_${new Date().getTime()}.xlsx`)
},
/**
* 搜索
*/
handleQuery(){
this.queryParams.pageNum = 1;
this.getList();
},
/**
* 重置
*/
resetQuery(){
this.dateRange = [];
this.queryParams = { pageNum: 1, pageSize: 20, mc: null, lx: null }
this.resetForm("queryForm");
this.handleQuery();
},
/**
* 多选框选中数据
*/
handleSelectionChange(selection) {
this.ids = selection.map(item => item.bbm)
this.single = selection.length != 1
this.multiple = !selection.length
},
}
}
</script>
<style scoped>
#commonDiv{
width: 100%;
height: calc(100vh - 84px);
}
</style>