自定义表单组件

<template>
	<div >
		<el-form :label-position="labelPosition"  
		class="search-area-form"  label-width="100px" :rules="rules" ref="items" :model="formData" size="mini" style="margin-top:10px" inline>
			<div class="main-form">
				<el-row>
					<el-col v-for="item in formColumns" :key="item.key" :span="item.rowSpan ?item.rowSpan :6">
							<el-form-item :label="item.label + ‘：‘" :prop="item.prop">
								<select-dept-by-list v-if="item.type === ‘dept-by-list‘" v-model="formData[item.prop]" name="formData[item.prop]"></select-dept-by-list>
								<area-select v-if="item.type === ‘area-select‘" v-model="formData[item.prop]" ></area-select>
								<el-input v-if="item.type === ‘input‘" v-model="formData[item.prop]" :placeholder="item.props.placeholder || ‘请输入‘"
								:disabled="item.props.disabled || false" clearable></el-input>
								<el-select v-if="item.type === ‘select‘" v-model="formData[item.prop]" :placeholder="item.props.placeholder || ‘请选择‘"
								:disabled="item.props.disabled || false" clearable>
									<el-option v-for="i in item.props.options" :key="i.value" :label="i.label" :value="i.value"></el-option>
								</el-select>
								<el-switch v-model="formData[item.prop]" v-if="item.type === ‘switch‘" :disabled="item.props.disabled || false" ></el-switch>
								<el-date-picker v-model="formData[item.prop]"
								v-if="item.type === ‘date‘" 
								:format="item.format ? item.format : ‘yyyy-MM-dd‘"
								:value-format="item.valueFormat ? item.valueFormat : ‘yyyy-MM-dd‘"
								:disabled="item.props.disabled || false"
								type="date" :placeholder="item.props.placeholder || ‘请选择日期‘" clearable></el-date-picker>
								<el-date-picker v-model="formData[item.prop]"
								v-if="item.type === ‘datetime‘" 
								:format="item.format ? item.format : ‘yyyy-MM-dd‘"
								:value-format="item.valueFormat ? item.valueFormat : ‘yyyy-MM-dd‘"
								:disabled="item.props.disabled || false"
								type="datetime" :placeholder="item.props.placeholder || ‘请选择创建时间‘" clearable></el-date-picker>
							</el-form-item></el-col>
				</el-row>
			</div>
		</el-form> 
	</div>
</template>

<script>
import AreaSelect from ‘./../AreaSelect‘
export default {
		name: ‘dataForm‘,
		components: {
           "AreaSelect":AreaSelect
        },
        props:{
            formColumns:
            {
                type: Array,
                default: () => []
            },
            formData:
            {
                type: Object,
                required: true
            },
            labelPosition:
            {
                type: String,
                default: "top"
            },
			saveOrUpdate:{
               type: Boolean,
               default: false
			},
			rules:{

			}
           },
		data() {
			return {
				
			}
        },
computed:{
			
		},
		created(){},
		methods:{
			submitForm()
			{
				console.log(this.formData);
                this.$emit("save",this.formData)
			}
		}
	}
</script>
<style scoped="scoped">
   *{box-sizing: border-box;}
</style>

<template>
	<div>
    <el-table
        v-loading="loading"
        ref="default"
        v-bind="$attrs"
        :data="data"
        :header-cell-style="{background:‘#F4F4F5‘}"
        :row-class-name="tableRowClassName"
        @selection-change="selectionChange"
        @sort-change="(s) => (sortChangeOperate ? sortChangeOperate(s) : null)"
        @row-click="(row, column, event) => (rowClick ? rowClick(row, column, event) : null)">
        <slot name="table-column-first"/>
        <el-table-column
            v-if="selectionCell"
            type="selection"
            width="55"/>
        <el-table-column v-if="columns.length === 0" width="150">
            <template slot-scope="scope">
                {{ scope.$index }}
            </template>
        </el-table-column>
        <el-table-column v-for="(column, index) in columns"
                         v-else
                         :align="column.align || column.headerAlign ? column.align || column.headerAlign : ‘center‘"
                         :key="index"
                         :label="column.label"
                         :prop="column.prop"
                         :sortable="column.sortBy != null || column.sortable"
                         :min-width="column.width ? column.width: null"
                         :show-overflow-tooltip="column.overflowTooltip">
        </el-table-column>
        <slot name="table-column"/>
        <el-table-column
            v-if="rowDeleteOperate != null || rowUpdateOperate != null || rowDetailOperate != null"
            label="操作"
            :width="rowOperateWidth"
            align="center"
            fixed="right">
            <template slot-scope="scope">
                <el-tooltip
                    v-if="rowDetailOperate != null"
                    :visible-arrow = "false"
                    class="item"
                    effect="light"
                    content="查看"
                    placement="bottom-start">
                    <el-button
                        v-if="rowDetailOperate != null"
                        key="detail"
                        :type="rowOperateMode ? rowOperateMode : ‘success‘"
                        :icon="rowOperateMode === ‘text‘ ? null : ‘el-icon-menu‘"
                        class="tiny"
                        @click="handleRowDetailOperate(scope.row)">
                        <template v-if="rowOperateMode === ‘text‘">
                            查看
                        </template>
                    </el-button>
                </el-tooltip>
                <el-tooltip
                    v-if="rowUpdateOperate != null"
                    :visible-arrow = "false"
                    class="item"
                    effect="light"
                    content="修改"
                    placement="bottom-start">
                    <el-button
                        v-if="rowUpdateOperate != null"
                        key="update"
                        :type="rowOperateMode ? rowOperateMode : ‘primary‘"
                        :icon="rowOperateMode === ‘text‘ ? null : ‘el-icon-edit‘"
                        class="tiny"
                        @click="handleRowUpdateOperate(scope.row)">
                        <template v-if="rowOperateMode === ‘text‘">
                            修改
                        </template>
                    </el-button>
                </el-tooltip>
                <el-tooltip
                    v-if="rowDeleteOperate != null"
                    :visible-arrow="false"
                    class="item"
                    effect="light"
                    content="删除"
                    placement="bottom-start">
                    <el-button
                        key="delete"
                        :type="rowOperateMode ? rowOperateMode : ‘danger‘"
                        :icon="rowOperateMode === ‘text‘ ? null : ‘el-icon-delete‘"
                        class="tiny"
                        @click="handleRowDeleteOperate(scope.row)">
                        <template v-if="rowOperateMode === ‘text‘">
                            删除
                        </template>
                    </el-button>
                </el-tooltip>
                <slot :data="scope.row"
                      :row="scope.row"
                      name="table-column-operation"/>
            </template>
        </el-table-column>
        <slot name="table-column-last"/>
    </el-table>
	</div>
</template>

<script>

/**
 * Description: 列表表格<br>
 * Comments Name: ListTable<br>
 * Date: 2020/05/17 
 * EditorDate: 2020/05/17 
 * Editor: sj
 */
export default {
    name: "ListTable",
    components: {},
    props: {
        columns:
        {
            type: Array,
            default: () => []
        },
        data:
        {
            type: Array,
            required: true
        },
        rowOperateMode:
        {
            type: String,
            default: null
        },
        rowOperateWidth: {
            type: String,
            default: "150px"
        },
        rowDeleteOperate:
        {
            type: Function,
            default: null
        },
        rowUpdateOperate:
        {
            type: Function,
            default: null
        },
        rowDetailOperate:
        {
            type: Function,
            default: null
        },
        sortChangeOperate:
        {
            type: Function,
            default: null
        },
        rowClick: {
            type: Function,
            default: null
        },
        selectionCell: {
            type: Boolean,
            default: false
        },
        tableHeight: {
            type: String,
            default: ""
        }
    },
    data()
    {
        return {
            imgFileTypeName: ["bmp", "jpg", "jpeg", "png", "gif"],
            pdfFileTypeName: ["pdf"],
            downloadFlag: false,
            loading:false,
        };
    },
    methods:
    {
        tableRowClassName({ row })
        {
            if ((row.adjustState === "2" || row.adjustState === "3") && row.approvalStatus === "1")
            {
                return "expired-row";
            }
            if (row.approvalStatus === "3")
            {
                return "cancel-row";
            }
            return "";
        },
        imgPreview(file, downloadFlag)
        {
            if (!file) return;
            let fileType = this.getFileType(file);
            this.downloadFlag = downloadFlag || false;
            if (this.pdfFileTypeName.indexOf(fileType) > -1)
            {
                this.pdfKey++;
                this.previewPDFDialog.visited = true;
                this.previewPDFDialog.url = file;
            }
            else
            {
                this.previewDialog.visited = true;
                this.previewDialog.url = file;
            }
        },
        imgDownload(file)
        {
            window.location.href = file;
        },
        getFileType(file)
        {
            let typeValue = file ? file.split(".") : [];
            if (typeValue.length > 1)
            {
                return typeValue[typeValue.length - 1];
            }
        },
        showOption(cell, options)
        {
            options = options.filter(o => (o.id || o.key) === cell);
            if (options && options.length > 0)
            {
                return options[0].name || options[0].label;
            }
            return cell;
        },
        handleRowDeleteOperate(row)
        {
          this.$emit("rowDeleteOperate",row)
        },
        handleRowUpdateOperate(row)
        {
          this.$emit("rowUpdateOperate",row)
        },
        handleRowDetailOperate(row)
        {
          this.$emit("rowDetailOperate",row)
        },
        selectionChange(rows)
		{
		  debugger;
          this.$emit("selectionChangeOperate",rows)
        },
        showLoading()
		{
          this.loading=true;
        },
        hideLoading(){
          this.loading=false;
        }
    }
};
</script>

<style scoped>
.img{
    height: 0;
}
.downBtn {
    text-align: center;
    margin-top: 10px;
}
</style>
<style>
.el-table_1_column_1 .el-checkbox__inner{margin-left:4px!important;}
.el-tooltip__popper {
  max-width: 400px;
}
.el-table .expired-row {
    background: #9CBDDE;
}
.el-table .cancel-row {
    background: #DCDFE6;
}
</style>

<template>
	<div class="base-page">
		<el-row>
			<el-button type="primary"  @click="queryRecords(‘query‘)" size="mini">查询</el-button>
			<el-button type="primary"  @click="addRecord" size="mini">添加</el-button>
			<el-button type="primary"  @click="updateRecord" size="mini">修改</el-button>
			<el-button type="danger"   @click="deleteRecord" size="mini">删除</el-button>
		</el-row>
		<data-form :formColumns="searchFormItems" :formData="searchFormData"></data-form>
		<el-pagination small @size-change="pageSizeChange" @current-change="currentPageChange"
        :current-page="currentPage" :page-sizes="[10,20,50]" :page-size="pageSize" layout="->,prev, pager, next, jumper, sizes,total"
        :total="totalSize" :pagerCount="5" background style="margin-bottom:10px">
        </el-pagination>
		<list-table ref="queryTable1"  :columns="headArray" :data="tableData"
		 @selectionChangeOperate="selectionChange"
		 :selectionCell="true"></list-table>
		<!--新增和修改-->
		<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="800px" :close-on-click-modal=‘false‘ @close="closeEditForm">
		     <el-form :inline="true" :model="editForm" :rules="editRules" ref="editForm" label-width="140px" size="mini"
			 label-position="right" class="el-form-horizontal">
				<el-form-item label="城市" prop="cityName">
				  <el-select v-model="editForm.cityCode" placeholder="请选择城市" clearable  @change="cityCodeChange">
					 <el-option v-for="(item,index) in cityList" :key="item.value" :label="item.label" :value="item.value"></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="城市代码" prop="cityCode">
				  <el-input v-model="editForm.cityCode" placeholder="请输入城市代码" :disabled="true"></el-input>
				</el-form-item>
				<el-form-item label="归属网点" prop="belongNetwork">
				  <el-select v-model="editForm.belongNetwork" placeholder="请选择归属网点" clearable>
					<el-option v-for="(item,index) in cityList" :key="item.value" :label="item.label" :value="item.value"></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="机场三字码" prop="thrLetterCode">
				  <el-input v-model="editForm.thrLetterCode" placeholder="请输入机场三字码"></el-input>
				</el-form-item>
				<el-form-item label="归属类型" prop="belongType">
				  <el-select v-model="editForm.belongType" placeholder="请选择" clearable>
					<el-option v-for="(item,index) in belongTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="业务类型" prop="serviceType">
				  <el-select v-model="editForm.serviceType" placeholder="请选择业务类型" :multiple="true" clearable>
					<el-option v-for="(item,index) in serviceTypeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
				  </el-select>
				</el-form-item>
				<el-form-item label="行政代码" prop="administrativeCode">
				  <el-select v-model="editForm.administrativeCode" placeholder="请选择" clearable  @change="">
					<el-option v-for="(item,index) in codeList" :key="item.value" :label="item.label" :value="item.value"></el-option>
				  </el-select>
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="closeEditForm" size="mini">取 消</el-button>
				<el-button type="primary" @click="submitForm" size="mini">确 定</el-button>
            </span>
		</el-dialog>
	</div>
</template>

<script>
import axios from ‘axios‘
import listTable from ‘./../../components/list-table‘
import dataForm from ‘./../../components/data-form‘
export default {
		name: ‘dataForm1‘,
		components: {
			"list-table":listTable,
			"data-form":dataForm
		},
		data() {
			return {
				dialogTitle:"添加",
				dialogVisible:false,
				tableData:[],
				currentPage:1,
				pageSize:10,
				totalSize:0,
				selectionRows:[],
				detailRow:{},
				headArray:[
					{
					key:1,
					label:"城市",
					prop:"cityName",
					overflowTooltip: true
					},
					{
					key:2,
					label:"城市代码",
					prop:‘cityCode‘,
					exist:null,
					},
					{
					key:3,
					label:"归属网点",
					prop:‘belongNetwork‘,
					checked:true,
					},
					{
					key:4,
					label:"机场三字码",
					prop:‘thrLetterCode‘,
					checked:true,
					},
					{
					key:5,
					label:"归属类型",
					prop:‘belongType‘,
					checked:true,
					},
					{
					key:6,
					label:"业务类型",
					prop:‘serviceType‘,//1.提货 2.发货
					},
					{
					key:7,
					label:"创建人",
					prop:‘createdEmpCode‘,
					checked:true,
					},
					{
					key:8,
					label:"创建时间",
					prop:‘createdTmStr‘,
					width:‘150px‘
					},
					{
					key:9,
					label:"修改人",
					prop:‘modifiedEmpCode‘,
					checked:true,
					},
					{
					key:10,
					label:"修改时间",
					prop:‘modifiedTmStr‘,
					width:‘150px‘
					},
				],
				searchFormData:{
					cityCode:"",//城市code
					thrLetterCode:"",//机场三字码
					belongNetwork:"",//归属网点
					belongType:"",//归属类型(1 大网，2重货)
				},
				editForm:{
					username:"",//用户名
					cityCode:"",//城市code
					thrLetterCode:"",//机场三字码
					belongNetwork:"",//归属网点
					belongType:"",//归属类型(1 大网，2重货)
					serviceType:[],
					id:""
				},
				formData: {
					username:"",//用户名
					cityCode:"",//城市code
					thrLetterCode:"",//机场三字码
					belongNetwork:"",//归属网点
					belongType:"",//归属类型(1 大网，2重货)
				},
				labelPosition:"top",
				searchFormItems:[
					{
						label: ‘城市‘,
						prop: ‘cityCode‘,
						type: ‘select‘,
						props: {
							placeholder: ‘‘,
							options: () => this.cityList
						},
						
						rules: [{
							required: true,
							message: ‘请输入城市名称‘,
							trigger: ‘blur‘
						}]
					},
					{
						label: ‘机场三字码‘,
						prop: ‘thrLetterCode‘,
						type: ‘input‘,
						props: {
							placeholder: ‘‘
						}
					},
					{
						label: ‘归属网点‘,
						prop: ‘belongNetwork‘,
						type: ‘dept-by-list‘,
						props: {
						   placeholder: ‘‘,
						}
					},
					{   label: ‘归属类型‘,
						prop: ‘belongType‘,
						type: ‘select‘,
						props: {
							placeholder: ‘请选择归属类型‘,
							list: [{
								value: ‘1‘,
								label: ‘大网‘,
							}, {
								value: ‘2‘,
								label: ‘重货‘
							}
							]
						},
					},
				],
				formItems: [
					{
						label: ‘城市‘,
						prop: ‘cityCode‘,
						type: ‘select‘,
						props: {
							placeholder: ‘‘,
							list: () => this.cityList,
							disabled:true,
						},
						rules: [{
							required: true,
							message: ‘请输入城市名称‘,
							trigger: ‘blur‘
						}]
					},
					{
						label: ‘机场三字码‘,
						prop: ‘thrLetterCode‘,
						type: ‘input‘,
						props: {
							placeholder: ‘‘
						}
					},
					{   label: ‘归属类型‘,
						prop: ‘belongType‘,
						type: ‘select‘,
						props: {
							placeholder: ‘请选择归属类型‘,
							list: [{
								value: ‘1‘,
								label: ‘大网‘,
							}, {
								value: ‘2‘,
								label: ‘重货‘
							}
							]
						},
			        },
				],
				cityList:[
					{
						value: ‘010‘,
						label: ‘北京‘,
					}, 
					{
						value: ‘022‘,
						label: ‘天津‘,
					},
					{
						value: ‘023‘,
						label: ‘重庆‘
					},
					{
						value: ‘755‘,
						label: ‘深圳‘
					}
				],
				serviceTypeList:[
					{
						value: ‘1‘,
						label: ‘提货‘,
					}, {
						value: ‘2‘,
						label: ‘发货‘
					}
				],
				belongTypeList:[
					{
						value: ‘1‘,
						label: ‘大网‘,
					}, {
						value: ‘2‘,
						label: ‘重货‘
					}
				],
				codeList:[
					{
						value: ‘110000‘,
						label: ‘110000‘,
					}, {
						value: ‘110101‘,
						label: ‘110101‘
					},
					{
						value: ‘110102‘,
						label: ‘110102‘,
					}, {
						value: ‘110103‘,
						label: ‘110103‘
					}
				],
				editRules:{
					
				}
			} 
			},
        computed:{
			
		},
		created(){
		  this.getCityList();
		},
		mounted(){
		  
		},
		methods:{
			submitForm()
			{
			  console.log(this.formData);
			  this.saveRecord(this.editForm)
			},
			async getCityList()
			{
				let params={
				   distName:this.formData.cityCode,
				}
				const response = await axios.post(‘/sys/air-open-base/basedata/findDistrictNoCache‘, params) // todo del
				const { status, data } = response
				if (data.succ == ‘ok‘) {
					  let cityOptions = data.result.map(item => {
					  return {
					    label: item.distName,
					    value: item.distCode
					  }
					})
					this.cityList=cityOptions;
				}
			},
			clearFormData()
			{
				Object.keys(this.formData).forEach(key=>{this.formData[key]=‘‘})
				this.formData["serviceType"]=[]
			},
			async queryRecords(type)
			{
			if(type=="query"){
			  this.currentPage=1;
			}
			this.$refs.queryTable1.showLoading();
			let params={
				username:this.searchFormData.username,
				cityCode:this.searchFormData.cityCode,
				thrLetterCode:this.searchFormData.thrLetterCode,
				belongNetwork:this.searchFormData.belongNetwork,
				belongType:this.searchFormData.belongType,
				currentPage:this.currentPage,
				pageSize:this.pageSize,
			}
			const response = await axios.post(‘/sys/air-open-base/belongNetwork/findByPage‘, params) // todo del
			const { status, data } = response
			if (status === 200 && data.succ === ‘ok‘) {
				this.loading = false
				this.tableData = data.result.records
				this.totalSize = data.result.total;
				setTimeout(()=>{
                 this.$refs.queryTable1.hideLoading();
				},1000)
			} else {
				this.$refs.queryTable1.hideLoading();
				return false
			}
				
		},
		cityCodeChange()
		{
			
		},
		addRecord(row)
		{
		  this.dialogTitle="添加"
		  this.dialogVisible=true;
		  Object.keys(this.editForm).forEach(key=>{this.editForm[key]=‘‘})
		},
		async saveRecord(row)
		{
          // 获取数据
		    let params={
				cityName: row.cityName,
				cityCode: row.cityCode,
				belongNetwork: row.belongNetwork,
				thrLetterCode: row.thrLetterCode,
				belongType: row.belongType,
				serviceType: row.serviceType.join(","),
				administrativeCode: row.administrativeCode,
				id:row["id"]==null? "":row["id"]
			}
		    const response = await axios.post(‘/sys/air-open-base/belongNetwork/saveOrUpdate‘, params) //
			if (response.data.succ === ‘ok‘) {
				this.$message({
				  type: ‘success‘,
				  message: ‘操作成功!‘
				});
				this.dialogVisible=false;
				this.queryRecords("query")
			} else {
				this.$confirm(response.data.msg, ‘提示‘, {
				   type: ‘warning‘,
				   showCancelButton:false,
				   confirmButtonText:"确定",
				   center: false
				})
			}
		},
		updateRecord()
		{
			if(this.selectionRows.length==1){
			   this.dialogTitle="编辑"
			   if(this.selectionRows[0].serviceType.indexOf(",")!=-1){
				 this.formData.serviceType=this.selectionRows[0].serviceType.split(",")  
			   }
			   this.formData={
					username:this.selectionRows[0].username,//用户名
					cityCode:this.selectionRows[0].cityCode,//城市code
					thrLetterCode:this.selectionRows[0].thrLetterCode,//机场三字码
					belongNetwork:this.selectionRows[0].belongNetwork,//归属网点
					belongType:this.selectionRows[0].belongType,//归属类型(1 大网，2重货)
					serviceType: this.formData.serviceType,//业务类型
					administrativeCode: this.selectionRows[0].administrativeCode,//行政代码
			   }
			   if(this.selectionRows[0]["id"]!="" && this.selectionRows[0]["id"]!=null){
				   this.formData.id=this.selectionRows[0]["id"];
			   }
			   this.editForm=JSON.parse(JSON.stringify(this.formData));
			   this.dialogVisible=true;
			}else{
				this.$confirm("请先选择一条数据", ‘提示‘, {
                    type: ‘warning‘,
                    showCancelButton:false,
                    confirmButtonText:"确定",
                    center: false
                }).then(() => {

                }).catch(() => {

                });
                return false;
			}
		},
		closeEditForm()
		{
          this.dialogVisible=false;
		  Object.keys(this.editForm).forEach(key=>{this.editForm[key]=‘‘})
		},
		deleteRecord()
		{
		  this.rowArray=this.selectionRows;
		  if (this.selectionRows.length>0) {
             let tempArray=this.rowArray;
             let tempIdArray=[];
             for(var i=0;i<tempArray.length;i++){
               tempIdArray.push(tempArray[i].id);
			 }
			 this.$confirm(‘确定删除吗, 是否继续?‘, ‘提示‘, {
					confirmButtonText: ‘确定‘,
					cancelButtonText: ‘取消‘,
					type: ‘warning‘
					}).then(() => {
					  let params={
					   ids:tempIdArray.join(","),//主键ID 多个用逗号分开
					  }
					  axios.post(‘/sys/air-open-base/belongNetwork/delete‘, params).then((res)=>{
						if(res.data.succ=="ok"){
							this.$message({
							  type: ‘success‘,
							  message: ‘删除成功!‘
							});
							this.queryRecords("query");
							}
						}).catch((res)=>{

						})
					}).catch(() => {
					         
					});
                }else{
			     this.$confirm("请至少选择一条数据", ‘提示‘, {
                    type: ‘warning‘,
                    showCancelButton:false,
                    confirmButtonText:"确定",
                    center: false
                 })
			 }
		 },
		 currentPageChange(val)
		 {
           this.currentPage = val;
           this.tableData=[];
           this.queryRecords();
		  },
		  //展示页数切换
		  pageSizeChange(val) 
		  {
			this.pageSize = val;
			this.currentPage=1;
			this.queryRecords();
		  },
		  rowUpdateOperate(row)
		  {

		  },
		  rowDeleteOperate(row)
		  {
			  
		  },
		  selectionChange(rows)
		  {
		   this.selectionRows=rows;
		  },
	 }
	}
</script>
<style scoped="scoped">
   .base-page{padding:4px 10px}
   .el-table_1_column_1.el-table-column--selection .el-checkbox__inner{margin-left:4px!important;}
</style>