123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250 |
- <template>
- <el-dialog title="商品选择器" width="840px" :visible.sync="dialogVisible" :append-to-body="false"
- :modal-append-to-body="false" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false"
- @closed="handleClose" class="purchasePlan-picker">
- <div class="purchasePlan-picker__body">
- <div class="purchasePlan-picker__filter">
- <div class="filter-item">
- <el-input v-model="searchParams.keyword" clearable placeholder="请输入单号" style="width: 160px" />
- </div>
- <div class="filter-item">
- <el-button type="primary" @click="handleSearch">搜索 </el-button>
- </div>
- </div>
- <el-table ref="purchasePlanTable" v-loading="loading" :data="purchasePlanData.data" border row-key="id"
- @selection-change="handleSelectionChange" @row-click="handleRowClick" max-height="400" style="width: 100%; min-height: 400px">
- <el-table-column v-if="limit === 1" label="选择" width="55" align="center">
- <template slot-scope="scope">
- <el-radio v-model="radioGuide" :label="scope.row"
- :disabled="selectedIds.some(v => v === scope.row.id)"></el-radio>
- </template>
- </el-table-column>
- <el-table-column v-else type="selection" label="选择" width="55" :selectable="checkDisable" reserve-selection
- align="center" />
- <el-table-column v-for="column in columns" :key="column.label" align="center" v-bind="column" />
- </el-table>
- <div class="purchasePlan-picker__tools">
- <div class="tools">
- </div>
- <el-pagination v-if="purchasePlanData.data_total" background :page-sizes="[10, 30, 50, 100]"
- :total="purchasePlanData.data_total" layout="total, sizes, prev, next, pager, jumper"
- @size-change="handleSizeChange" @current-change="handleCurrentChange" />
- </div>
- </div>
- <span slot="footer" class="dialog-footer">
- <el-button @click="handleCancel">取 消</el-button>
- <el-button type="primary" @click="handleConfirm">确 定</el-button>
- </span>
- </el-dialog>
- </template>
- <script>
- import * as DefaultOptions from './defaultOptions'
- import request from '@/utils/request'
- export default {
- name: 'EnPurchasePlan',
- props: {
- ...DefaultOptions.props
- },
- data() {
- return {
- ...DefaultOptions.data,
- dialogVisible: false,
- selected: [],
- radioGuide: '',
- purchasePlanParams: {
- page_no: 1,
- page_size: 10,
- market_enable: true,
- },
- searchParams: {
- sn: ''
- },
- purchasePlanData: {
- data: [],
- data_total: 0
- },
- // 加载采购计划列表
- loading: false
- }
- },
- mounted() {
- this.getGoodsList()
- },
- watch: {
- show: {
- immediate: true,
- handler(newVal) {
- this.$nextTick(() => {
- this.dialogVisible = newVal
- })
- }
- }
- },
- methods: {
- checkDisable(row, index) {
- return this.selectedIds.some(v => v === row.id) ? 0 : 1
- },
- // 关闭
- handleClose() {
- this.$nextTick(this.close)
- this.dialogVisible = false
- this.$emit('closed')
- },
- // 取消
- handleCancel() {
- this.dialogVisible = false
- this.$emit('cancel')
- typeof this.reject === 'function' && this.reject('取消了')
- },
- // 确认
- handleConfirm() {
- if (this.limit === 1) {
- if (!this.radioGuide) return this.$message.error('请选择采购计划')
- } else {
- if (!this.selected.length) return this.$message.error('请选择采购计划')
- }
- this.dialogVisible = false
- let purchasePlans = this.limit === 1 ? [this.radioGuide] : this.selected
- purchasePlans = JSON.parse(JSON.stringify(purchasePlans))
- this.$emit('confirm', purchasePlans)
- typeof this.resolve === 'function' && this.resolve(purchasePlans)
- this.$emit('close')
- },
- // 选择
- handleSelectionChange(val) {
- this.selected = val
- },
- // 分页大小发生改变
- handleSizeChange(size) {
- this.purchasePlanParams.page_size = size
- this.getGoodsList()
- },
- // 当前页数发生改版
- handleCurrentChange(current) {
- this.purchasePlanParams.page_no = current
- this.getGoodsList()
- },
- // 搜索
- handleSearch() {
- this.purchasePlanParams.page_no = 1
- this.purchasePlanParams = {
- ...this.purchasePlanParams,
- ...this.searchParams
- }
- this.getGoodsList()
- },
- // 点击了某行
- handleRowClick(row) {
- if (this.limit === 1) {
- this.radioGuide = row
- } else {
- this.$refs.purchasePlanTable.toggleRowSelection(row)
- }
- },
- // 获取采购计划列表
- async getGoodsList() {
- this.loading = true
- const params = JSON.parse(JSON.stringify(this.purchasePlanParams))
- console.log(params);
- request({
- url: this.goodsApi,
- method: 'get',
- loading: false,
- params: {
- ...params,
- ...this.purchasePlanApiParams,
- }
- }).then(response => {
- this.loading = false
- if(response.records==undefined){
- this.purchasePlanData = response
- }else{
- response.data=response.records
- response.data_total=response.total
- this.purchasePlanData = response
- }
- })
- }
- }
- }
- </script>
- <style lang="scss" scoped>
- .purchasePlan-picker {
- clear: both;
- .purchasePlan-picker__filter {
- float: right;
- }
- /deep/ {
- .el-dialog__body {
- padding-top: 20px;
- padding-bottom: 20px;
- }
- .el-dialog__header {
- padding: 9px 20px 10px;
- border-bottom: 1px solid #e5e5e5;
- text-shadow: 0 1px 0 #fff;
- background-color: #efefef;
- }
- .el-dialog__footer {
- border-top: solid 1px #e5e5e5;
- background: #f5f5f5;
- }
- .el-table .el-table__body-wrapper .el-table__row {
- cursor: pointer;
- }
- }
- &__filter {
- display: flex;
- align-items: center;
- background-color: #fff;
- border-right: none;
- position: relative;
- margin-bottom: 10px;
- .filter-item {
- display: flex;
- align-items: center;
- }
- .filter-item+.filter-item {
- margin-left: 10px;
- }
- .filter-item:last-child {
- flex: 1;
- margin-left: 20px;
- /deep/ .el-button {
- width: 100%;
- max-width: 120px;
- font-weight: bold;
- }
- }
- }
- &__body {
- max-height: 650px;
- overflow: hidden auto;
- }
- &__tools {
- display: flex;
- align-items: center;
- justify-content: space-between;
- margin-top: 10px;
- .tools {
- display: flex;
- }
- }
- }
- </style>
|