二级套餐包改造： 1.封装公用组件

gaoluyang

8 天以前 deb5baea0b833c619cddc85f5409137fade95dca

 src/views/basicData/customerFile/index.vue

@@ -5,12 +5,23 @@
        <span class="search_title">客户名称：</span>
        <el-input
          v-model="searchForm.customerName"
          style="width: 240px"
          style="width: 240px;margin-right: 10px"
          placeholder="请输入"
          @change="handleQuery"
          clearable
          :prefix-icon="Search"
        />
         <span class="search_title">客户分类：</span>
         <el-select
          v-model="searchForm.customerType"
          placeholder="请选择"
          style="width: 240px"
          clearable
           @change="handleQuery"
        >
           <el-option  label="零售客户" value="零售客户" />
           <el-option  label="进销商客户" value="进销商客户" />
        </el-select>
        <el-button type="primary" @click="handleQuery" style="margin-left: 10px"
          >搜索</el-button
        >
@@ -36,11 +47,14 @@
        @pagination="pagination"
      ></PIMTable>
    </div>
    <el-dialog
    <FormDialog
      v-model="dialogFormVisible"
      :title="operationType === 'add' ? '新增客户信息' : '编辑客户信息'"
      :title="(type) => type === 'add' ? '新增客户信息' : '编辑客户信息'"
      :operation-type="operationType"
      width="70%"
      @close="closeDia"
      @confirm="submitForm"
      @cancel="closeDia"
    >
      <el-form
        :model="form"
@@ -92,25 +106,6 @@
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="30" v-for="(contact, index) in formYYs.contactList" :key="index">
          <el-col :span="12">
            <el-form-item label="联系人：" prop="contactPerson">
              <el-input v-model="contact.contactPerson" placeholder="请输入" clearable  />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系电话：" prop="contactPhone">
              <div style="display: flex; align-items: center;width: 100%;">
                <el-input v-model="contact.contactPhone" placeholder="请输入" clearable />
                <el-button   @click="removeContact(index)" type="danger" circle style="margin-left: 5px;">
                  <el-icon><Close /></el-icon>
                </el-button>
              </div>
            </el-form-item>
          </el-col>
        </el-row>
        <el-button @click="addNewContact" style="margin-bottom: 10px;">+ 新增联系人</el-button>

        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="银行基本户：" prop="basicBankAccount">
@@ -141,7 +136,33 @@
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="客户分类：" prop="customerType">
               <el-select  v-model="form.customerType" placeholder="请选择" clearable>
                 <el-option  label="零售客户" value="零售客户" />
                 <el-option  label="进销商客户" value="进销商客户" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
            <el-row :gutter="30" v-for="(contact, index) in formYYs.contactList" :key="index">
               <el-col :span="12">
                  <el-form-item label="联系人：" prop="contactPerson">
                     <el-input v-model="contact.contactPerson" placeholder="请输入" clearable  />
                  </el-form-item>
               </el-col>
               <el-col :span="12">
                  <el-form-item label="联系电话：" prop="contactPhone">
                     <div style="display: flex; align-items: center;width: 100%;">
                        <el-input v-model="contact.contactPhone" placeholder="请输入" clearable />
                        <el-button   @click="removeContact(index)" type="danger" circle style="margin-left: 5px;">
                           <el-icon><Close /></el-icon>
                        </el-button>
                     </div>
                  </el-form-item>
               </el-col>
            </el-row>
            <el-button @click="addNewContact" style="margin-bottom: 10px;">+ 新增联系人</el-button>
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="维护人：" prop="maintainer">
@@ -170,66 +191,36 @@
                type="date"
                placeholder="请选择"
                clearable
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确认</el-button>
          <el-button @click="closeDia">取消</el-button>
        </div>
      </template>
    </el-dialog>
    </FormDialog>
    <!-- 用户导入对话框 -->
    <el-dialog
      :title="upload.title"
    <ImportDialog
      ref="importDialogRef"
      v-model="upload.open"
      :title="upload.title"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip text-center">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link
              type="primary"
              :underline="false"
              style="font-size: 12px; vertical-align: baseline"
              @click="importTemplate"
              >下载模板</el-link
            >
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
      :action="upload.url"
      :headers="upload.headers"
      :disabled="upload.isUploading"
      :before-upload="upload.beforeUpload"
      :on-progress="upload.onProgress"
      :on-success="upload.onSuccess"
      :on-error="upload.onError"
      :on-change="upload.onChange"
      @confirm="submitFileForm"
      @cancel="handleImportCancel"
      @download-template="importTemplate"
    />
  </div>
</template>

<script setup>
import { ref } from "vue";
import { Search } from "@element-plus/icons-vue";
import {onMounted, ref} from "vue";
import { Search, Close } from "@element-plus/icons-vue";
import {
  addCustomer,
  delCustomer,
@@ -241,10 +232,17 @@
import { userListNoPage } from "@/api/system/user.js";
import useUserStore from "@/store/modules/user";
import { getToken } from "@/utils/auth.js";
import FormDialog from "@/components/Dialog/FormDialog.vue";
import ImportDialog from "@/components/Dialog/ImportDialog.vue";
const { proxy } = getCurrentInstance();
const userStore = useUserStore();

const tableColumn = ref([
  {
    label: "客户分类",
    prop: "customerType",
    width: 120,
  },
  {
    label: "客户名称",
    prop: "customerName",
@@ -297,6 +295,7 @@
    dataType: "action",
    label: "操作",
    align: "center",
      fixed: 'right',
    operation: [
      {
        name: "编辑",
@@ -312,6 +311,7 @@
const selectedRows = ref([]);
const userList = ref([]);
const tableLoading = ref(false);
const importDialogRef = ref(null);
const page = reactive({
  current: 1,
  size: 100,
@@ -333,6 +333,7 @@
const data = reactive({
  searchForm: {
    customerName: "",
    customerType: "",
  },
  form: {
    customerName: "",
@@ -346,6 +347,7 @@
    basicBankAccount: "",
    bankAccount: "",
    bankCode: "",
    customerType: "",
  },
  rules: {
    customerName: [{ required: true, message: "请输入", trigger: "blur" }],
@@ -363,6 +365,7 @@
    basicBankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
    bankAccount: [{ required: true, message: "请输入", trigger: "blur" }],
    bankCode: [{ required: true, message: "请输入", trigger: "blur" }],
    customerType: [{ required: true, message: "请选择", trigger: "change" }],
  },
});
const upload = reactive({
@@ -376,6 +379,47 @@
  headers: { Authorization: "Bearer " + getToken() },
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/basic/customer/importData",
  // 文件上传前的回调
  beforeUpload: (file) => {
    console.log('文件即将上传', file);
    // 可以在此处做文件类型或大小校验
    const isValid = file.type === 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' || file.name.endsWith('.xlsx') || file.name.endsWith('.xls');
    if (!isValid) {
      proxy.$modal.msgError("只能上传 Excel 文件");
    }
    return isValid;
  },
  // 文件状态改变时的回调
  onChange: (file, fileList) => {
    console.log('文件状态改变', file, fileList);
  },
  // 文件上传成功时的回调
  onSuccess: (response, file, fileList) => {
    console.log('上传成功', response, file, fileList);
    upload.isUploading = false;
    if(response.code === 200){
      proxy.$modal.msgSuccess("文件上传成功");
      upload.open = false;
      if (importDialogRef.value) {
        importDialogRef.value.clearFiles();
      }
      getList();
    }else if(response.code === 500){
      proxy.$modal.msgError(response.msg);
    }else{
      proxy.$modal.msgWarning(response.msg);
    }
  },
  // 文件上传失败时的回调
  onError: (error, file, fileList) => {
    console.error('上传失败', error, file, fileList);
    upload.isUploading = false;
    proxy.$modal.msgError("文件上传失败");
  },
  // 文件上传进度回调
  onProgress: (event, file, fileList) => {
    console.log('上传中...', event.percent);
  }
});
const { searchForm, form, rules } = toRefs(data);
const addNewContact = () => {
@@ -415,12 +459,23 @@
};
/** 提交上传文件 */
function submitFileForm() {
  proxy.$refs["uploadRef"].submit();
  upload.isUploading = true;
  if (importDialogRef.value) {
    importDialogRef.value.submit();
  }
}
/** 取消导入 */
function handleImportCancel() {
  upload.open = false;
}
/** 导入按钮操作 */
function handleImport() {
  upload.title = "客户导入";
  upload.open = true;
}
/** 下载模板 */
function importTemplate() {
  proxy.download("/basic/customer/downloadTemplate", {}, "客户导入模板.xlsx");
}
// 打开弹框
const openForm = (type, row) => {
@@ -478,6 +533,8 @@
};
// 提交修改
const submitEdit = () => {
   form.value.contactPerson = formYYs.value.contactList.map(item => item.contactPerson).join(",");
   form.value.contactPhone = formYYs.value.contactList.map(item => item.contactPhone).join(",");
  updateCustomer(form.value).then((res) => {
    proxy.$modal.msgSuccess("提交成功");
    closeDia();
@@ -507,6 +564,12 @@
const handleDelete = () => {
  let ids = [];
  if (selectedRows.value.length > 0) {
    // 检查是否有他人维护的数据
    const unauthorizedData = selectedRows.value.filter(item => item.maintainer !== userStore.nickName);
    if (unauthorizedData.length > 0) {
      proxy.$modal.msgWarning("不可删除他人维护的数据");
      return;
    }
    ids = selectedRows.value.map((item) => item.id);
  } else {
    proxy.$modal.msgWarning("请选择数据");
@@ -542,7 +605,9 @@
  return `${year}-${month}-${day}`;
}

getList();
onMounted(() => {
   getList();
});
</script>

<style scoped lang="scss"></style>