| | |
| | | :show-selection="showSelection" |
| | | :max-height="maxHeight" |
| | | @selection-change="handleSelectionChange" |
| | | <<<<<<< HEAD |
| | | ======= |
| | | @row-click="handleRowClick" |
| | | @row-dblclick="handleRowDblClick" |
| | | @cell-click="handleCellClick" |
| | | :max-width="maxWidth" |
| | | @export="handleExport" |
| | | >>>>>>> master |
| | | > |
| | | <el-table-column v-if="showSelection" type="selection" width="55" align="center" /> |
| | | <el-table-column v-if="showIndex" label="序号" type="index" width="60" align="center" /> |
| | |
| | | import { ElMessage, ElMessageBox } from 'element-plus' |
| | | |
| | | const props = defineProps({ |
| | | <<<<<<< HEAD |
| | | ======= |
| | | // 最大宽度 |
| | | maxWidth: { |
| | | type: [String, Number], |
| | | default: 'auto' |
| | | }, |
| | | handleCellClick: { |
| | | type: Function, |
| | | default: () => {} |
| | | }, |
| | | handleRowClick: { |
| | | type: Function, |
| | | default: () => {} |
| | | }, |
| | | handleExport: { |
| | | type: Function, |
| | | default: () => {} |
| | | }, |
| | | handleRowDblClick: { |
| | | type: Function, |
| | | default: () => {} |
| | | }, |
| | | >>>>>>> master |
| | | // 高度 |
| | | maxHeight: { |
| | | type: [String, Number], |
| | |
| | | <template> |
| | | <<<<<<< HEAD |
| | | <div> |
| | | <el-dialog |
| | | v-model="dialogVisible" |
| | |
| | | emit("handleBeforeClose") |
| | | emit('update:coalDialogFormVisible', false) |
| | | } |
| | | ======= |
| | | <div> |
| | | <el-dialog |
| | | v-model="dialogVisible" |
| | | :title="title" |
| | | width="800" |
| | | :close-on-click-modal="false" |
| | | :before-close="handleClose" |
| | | > |
| | | <el-form |
| | | ref="formRef" |
| | | style="max-width: 600px; margin: 0 auto" |
| | | :model="formData" |
| | | :rules="rules" |
| | | label-width="auto" |
| | | > |
| | | <el-form-item label="卡胡" prop="supplierName"> |
| | | <el-input |
| | | v-model="formData.supplierName" |
| | | placeholder="请输入供货商名称" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="纳税人识别号" prop="identifyNumber"> |
| | | <el-input |
| | | v-model="formData.identifyNumber" |
| | | placeholder="请输入纳税人识别号" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item label="经营地址" prop="address"> |
| | | <el-select v-model="formData.address" placeholder="请选择经营地址"> |
| | | <el-option label="Zone one" value="shanghai" /> |
| | | <el-option label="Zone two" value="beijing" /> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="银行账户" prop="bankAccount"> |
| | | <el-input |
| | | v-model="formData.bankAccount" |
| | | placeholder="请输入银行账户" |
| | | /> |
| | | </el-form-item> |
| | | <el-form-item> |
| | | <el-button type="primary" @click="submitForm"> 确定 </el-button> |
| | | </el-form-item> |
| | | </el-form> |
| | | </el-dialog> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, watch, defineProps } from "vue"; |
| | | |
| | | const props = defineProps({ |
| | | beforeClose: { |
| | | type: Function, |
| | | default: () => {}, |
| | | }, |
| | | form: { |
| | | type: Object, |
| | | default: () => ({}), |
| | | }, |
| | | addOrEdit: { |
| | | type: String, |
| | | default: "add", |
| | | }, |
| | | title: { |
| | | type: String, |
| | | default: "", |
| | | }, |
| | | }); |
| | | |
| | | const emit = defineEmits([ |
| | | "submit", |
| | | "handleBeforeClose", |
| | | "update:coalDialogFormVisible", |
| | | ]); |
| | | |
| | | // 表单引用 |
| | | const formRef = ref(null); |
| | | // 表单数据 |
| | | const formData = ref({ ...props.form }); |
| | | // 弹窗可见性 |
| | | const dialogVisible = defineModel("coalDialogFormVisible", { |
| | | required: true, |
| | | type: Boolean, |
| | | }); |
| | | |
| | | // 监听外部传入的表单数据变化 |
| | | watch( |
| | | () => props.form, |
| | | (newVal) => { |
| | | formData.value = { ...newVal }; |
| | | }, |
| | | { deep: true } |
| | | ); |
| | | |
| | | // 监听内部弹窗状态变化 |
| | | watch( |
| | | () => dialogVisible.value, |
| | | (newVal) => { |
| | | emit("update:coalDialogFormVisible", newVal); |
| | | } |
| | | ); |
| | | |
| | | // 提交表单 |
| | | const submitForm = async () => { |
| | | if (!formRef.value) return; |
| | | await formRef.value.validate((valid, fields) => { |
| | | if (valid) { |
| | | emit("submit", formData.value); |
| | | } |
| | | }); |
| | | }; |
| | | // 取消表单 |
| | | const cancelForm = () => { |
| | | emit("update:coalDialogFormVisible", false); |
| | | formData.value = {}; |
| | | }; |
| | | // 重置表单 |
| | | const resetForm = () => { |
| | | if (!formRef.value) return; |
| | | formRef.value.resetFields(); |
| | | }; |
| | | // 关闭弹窗 |
| | | const handleClose = () => { |
| | | // 触发父组件的关闭函数 |
| | | emit("handleBeforeClose"); |
| | | emit("update:coalDialogFormVisible", false); |
| | | }; |
| | | >>>>>>> master |
| | | const rules = reactive({ |
| | | supplierName: [ |
| | | { required: true, message: "请输入供货商名称", trigger: "blur" }, |