<template><!-- 巡查计划 - 新增巡查点位 --><el-dialog :visible.sync="dialogShow1" title="新增巡查点位" width="800" top="15vh" @close='handleCancle'><el-form :model="ruleForm" ref="ruleForm" class="demo-ruleForm"><el-table :data="ruleForm.tableData" border style="width: 100%;"><el-table-column type="index" label="序号" width="50" align="center"></el-table-column><el-table-column prop="objType" label="巡查对象类型" align="center"><template v-slot="scope"><el-form-item :prop="'tableData.'+scope.$index+'.objType'" :rules="rules.objType" :style="{marginBottom:marginBottomNum}"><el-select clearable v-model="scope.row.objType" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></template></el-table-column><el-table-column prop="objName" label="巡查对象/点位名称" align="center"><template v-slot="scope"><el-form-item :prop="'tableData.'+scope.$index+'.objName'" :rules="rules.objName" :style="{marginBottom:marginBottomNum}"><el-select clearable v-model="scope.row.objName" placeholder="请选择"><el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option></el-select></el-form-item></template></el-table-column><el-table-column prop="lat" label="点位经纬度" align="center"><template v-slot="scope"><el-form-item :style="{marginBottom:marginBottomNum}"><el-input disabled v-model="scope.row.lat"></el-input></el-form-item></template></el-table-column><el-table-column label="操作" width="100"><template slot-scope="scope"><el-button type="text" size="small" style="color: red;" @click="handleDelete(scope.row)">删除</el-button></template></el-table-column></el-table></el-form><span slot="footer" class="dialog-footer"><el-button @click="resetForm('ruleForm')">取消</el-button><el-button type="primary" @click="getSave('ruleForm')">保存</el-button></span></el-dialog>
</template><script>
export default {components: {},props: {// 弹窗是否显示dialogShow: {type: Boolean,default: false,},},data() {var objType = (rule, value, callback) => {console.log("sdfsdfs:", value);if (!value) {callback(new Error("请选择巡查对象类型"));} else {this.marginBottomNum = "0px";callback();}};var objName = (rule, value, callback) => {console.log("sdfsdfs:", value);if (!value) {this.marginBottomNum = "20px";callback(new Error("请选择巡查对象/点位名称"));} else {callback();}};return {dialogShow1: this.dialogShow,options: [{value: "选项1",label: "黄金糕",},{value: "选项2",label: "双皮奶",},{value: "选项3",label: "蚵仔煎",},{value: "选项4",label: "龙须面",},{value: "选项5",label: "北京烤鸭",},],ruleForm: {tableData: [{ objType: "", objName: "" }],},rules: {objType: [{ require: true, validator: objType, trigger: "change" }],objName: [{ validator: objName, trigger: "change" }],},marginBottomNum: "0px",};},created() {},methods: {// 保存getSave(formName) {this.$refs[formName].validate((valid) => {if (valid) {console.log("验证通过");} else {console.log("error submit!!");return false;}});},// 删除handleDelete() {},// 取消resetForm(formName) {this.$refs[formName].resetFields();},// 右上角叉号handleCancle() {this.$emit("close", this.dialogShow1);},},
};
</script><style lang="scss" scoped>
::v-deep .el-form-item {margin-bottom: 0;
}
</style>