kd-aiot-frontend-aps/src/views/saleOrder/components/AdditionalOrder.vue

<template>
  <ele-modal
    :visible.sync="visible"
    title="追加订单"
    width="75vw"
    append-to-body
  >
    <el-form ref="form" :model="form"  label-width="90px">
		<el-row :gutter="15">
			<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
			  <el-form-item label="销售订单号:">
			     <el-input clearable :maxlength="20" v-model="form.code"/>
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
			  <el-form-item label="订单类型:">
					<DictSelection dictName="订单类型" clearable v-model="form.orderType">
					</DictSelection>
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
			  <el-form-item label="按单按库:">
			  	<DictSelection dictName="按单按库" clearable v-model="form.orderLibraryType">
			  	</DictSelection>
			  </el-form-item>
			</el-col>
			<el-col v-bind="styleResponsive ? { lg: 6, md: 12 } : { span: 6 }">
			  <el-form-item label-width="0px">
			  	  <el-button
			  	  	type="primary"
			  	  	icon="el-icon-search"
			  	  	class="ele-btn-icon"
			  	  	@click="search"
			  	  	size="small"
			  	  >
			  	  	查询
			  	  </el-button>
			  	   <el-button @click="reset"
			  	  	 icon="el-icon-refresh-left"
			  	  	 size="small"
			  	  	 type="primary"
			  	   >重置</el-button>
			  </el-form-item>
			</el-col>
		</el-row>
	</el-form>	
	<ele-pro-table
	  ref="table"
	  :columns="columns"
	  :datasource="datasource"
	  :selection.sync="selection"
	  cache-key="systemRoleTable"
	  row-key="id"
	  @done="setSelect"
	>
		<!-- <template v-slot:name='{row}'>
			<el-link :underline="false" @click="openDetails(row)">
			  {{ row.name }}
			</el-link>
		</template> -->
	</ele-pro-table>

    <template v-slot:footer>
      <el-button @click="cancel">取消</el-button>
      <el-button type="primary" @click="save" :loading="loading">
        确定
      </el-button>
    </template>
  </ele-modal>
</template>

<script>
	import { getPageList  } from '@/api/saleOrder';
	import dictMixins from '@/mixins/dictMixins';
export default {
	mixins: [dictMixins],
	props: {
		selectList:Array,
		productCode:String
	},
    data() {
      return {
		columns: [
		  {
		    width: 45,
		    type: 'selection',
		    columnKey: 'selection',
		    align: 'center',
			reserveSelection: true
		  },
		  {
		    columnKey: 'index',
		    label: '序号',
		    type: 'index',
		    width: 55,
		    align: 'center',
		    showOverflowTooltip: true,
		    fixed: 'left'
		  },
		  {
		    prop: 'code',
		    label: '销售订单号',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110,
		    slot: 'code'
		  },
		  {
		    prop: 'lineNumber',
		    label: '行号',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110
		  },
		  {
		    prop: 'contractNum',
		    label: '合同数量',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110
		  },
		  {
		    prop: 'productSumWeight',
		    label: '合同重量',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110
		  },
		  {
		    prop: 'orderLibraryType',
		    label: '按单按库',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110,
			formatter: (_row, _column, cellValue) => {
			  return this.getDictValue('按单按库', _row.orderLibraryType);
			}
		  },
		  {
		    prop: 'orderType',
		    label: '订单类型',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110,
			formatter: (_row, _column, cellValue) => {
			  return this.getDictValue('订单类型', _row.orderType);
			}
		  },
		  {
		    prop: 'orderSource',
		    label: '订单来源',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110,
			formatter: (_row, _column, cellValue) => {
			  return this.getDictValue('订单来源', _row.orderSource);
			}
		  },
		  {
		    prop: 'status',
		    label: '生产状态',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110,
			formatter: (_row, _column, cellValue) => {
			  return this.getDictValue('生产状态', _row.status);
			}
		  },
		  {
		    prop: 'releaseTime',
		    label: '下达时间',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110
		  },
		  {
		    prop: 'deliveryTime',
		    label: '交付日期',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110
		  },
		  {
		    prop: 'customerName',
		    label: '客户名称',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110
		  },
		  {
		    prop: 'salesman',
		    label: '业务员',
		    align: 'center',
		    showOverflowTooltip: true,
		    minWidth: 110
		  },
		   {
		     prop: 'deliveryRequirements',
		     label: '交付要求',
		     align: 'center',
		     showOverflowTooltip: true,
		     minWidth: 110,
				formatter: (_row, _column, cellValue) => {
				  return this.getDictValue('交付要求', _row.deliveryRequirements);
				}
		   }
		],
        visible: false,
		loading:false,
		form:{},
		selection:[],
		tableList:[]
      };
    },
    computed: {
      // 是否开启响应式布局
      styleResponsive() {
        return this.$store.state.theme.styleResponsive;
      }
    },
    created () {
      this.requestDict('按单按库');
      this.requestDict('交付要求');
      this.requestDict('订单类型');
      this.requestDict('订单来源');
      this.requestDict('生产状态');
    },
    methods: {
	  /* 表格数据源 */
	  async datasource ({ page, limit, where, order }) {
	  		 const params = {
	  			 size: limit,
	  			 pageNum: page,
	  			 status:[1],
				 productCode:this.productCode,
				 ...this.form
	  		 }
	  		const data = await getPageList(params)
			this.tableList = data.list
	  		return data
	   },
	   // 设置选中
	   setSelect(){
		   this.$nextTick(() => {
			   this.$refs.table.clearSelection()
			   this.tableList.forEach(row => {
				   this.selectList.forEach(selected => {
					   if (selected.id === row.id) {
						   this.$refs.table.toggleRowSelection(row, true)
					   }
				   })
			   })
		   })
	   },
	   /* 搜索 */
	   search() {
	      this.$refs.table.reload({ page: 1, size:10 });
	   },
	   /*  重置 */
	   reset() {
	     this.form = {}
	     this.search()
	   },
	  open () {
	    this.visible = true;
	  },
      cancel () {
		this.form = {}
		this.$refs.form.clearValidate();
        this.visible = false;
      },
	  /* 保存编辑 */
	  save() {
	    this.$emit('choose',this.selection)
		this.cancel()
	  },
	  
    }
  };
</script>
<style lang="scss" scoped>
  .basic-details-title{
	  margin:10px 0
  }
  .add-product{
	  width:100%;
	  display:flex;
	  align-items:center;
	  justify-content:flex-end;
	  font-size:30px;
	  color:#1890ff;
	  margin:10px 0;
	  cursor: pointer;
  }
</style>