ezhizao_yzbh_vue/src/views/business/crm/ZeroChangeDialog.vue

<template>
  <el-dialog title="客户信息编辑" v-model="visible" :width="width" append-to-body draggable @close="close">
    <!-- <div slot="title" class="dialog-title-container">
      <span class="title-label"><i class="el-icon-document" /> 工资信息</span>
      <i class="el-icon-close" @click="close" />
    </div> -->
    <!-- 功能按钮 -->
    <div style="padding: 8px 24px 16px 24px">
      <el-form size="small" label-width="100px" v-model="form">
        <el-row :gutter="30">
          <el-col :span="12">
            <el-form-item label="客户名称">
              <div>{{ form.name }}</div>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否零申报">
              <el-select v-model="form.isZero" placeholder="请选择" style="width: 100%">
                <el-option v-for="item in yesOrNo" :key="item.label" :label="item.label" :value="item.value" />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="form-btns-container" style="height: 40px">
      <el-button size="small" style="float: right" @click="close" icon="close">
        取消</el-button>
      <el-button type="primary" icon="Finished" size="small" style="float: right; margin-left: 12px; margin-right: 12px"
        @click="handleSave">保存</el-button>
    </div>
  </el-dialog>
</template>
<script setup>
import {
  getCompany,
  addCompany,
  updateCompany,
} from "@/api/business/crm/company";
import { yesOrNo } from "@/utils/default";
import { ref } from "vue";
const { proxy } = getCurrentInstance();
const visible = ref(false);
const width = ref(800);
const editStatus = ref(false);
const baseUrl = ref(import.meta.env.VITE_APP_BASE_API);
const defaultIsZero = ref(null);
const props = defineProps({
  saveCallBack: {
    type: Function,
    default: () => { },
  },
});
const { saveCallBack } = toRefs(props);
const total = ref(0);

const form = ref({});
const saveValue = ref(null);

const emptyForm = {
  details: [],
};

function open(companyId, row) {
  saveValue.value = row;
  reset();
  visible.value = true;
  if (companyId) {
    getCompany(companyId).then((response) => {
      form.value = response.data;
      defaultIsZero.value = response.data.isZero;
    });
  }
}

function close() {
  visible.value = false;
  reset();
}

function reset() {
  form.value = proxy.deepClone(emptyForm);
}

function handleSave() {
  if (checkZero()) {
    proxy.$modal.confirm("确定修改么？").then((_) => {
      if (form.value.id) {
        updateCompany(form.value).then((response) => {
          proxy.$modal.msgSuccess("保存成功!");
          form.value = response.data;
          defaultIsZero.value = Number(response.data.isZero);
          saveCallBack.value(saveValue.value);
          close();
        });
      } else {
        addCompany(form.value).then((res) => {
          proxy.$modal.msgSuccess("保存成功!");
          form.value = response.data;
          defaultIsZero.value = Number(response.data.isZero);
          saveCallBack.value(saveValue.value);
          close();
        });
      }
    });
  }
}

function checkZero() {
  if (form.value.isZero == null) {
    proxy.$modal.msgError("请选择是否零申报");
    return false;
  }
  if (defaultIsZero.value === 1 || defaultIsZero.value == null) {
    return true;
  } else if (
    defaultIsZero.value != form.value.isZero &&
    form.value.isZero === 1
  ) {
    proxy.$modal.msgError("不可将非零申报客户改为零申报");
    return false;
  } else {
    return true;
  }
}

// 暴露给父组件的方法
defineExpose({
  open,
});
</script>
<style scoped>
.img {
  width: 23px;
  height: 23px;
  display: flex;
  justify-content: center;
  align-items: center;
}

::v-deep(.el-upload) {
  display: flex;
  text-align: center;
  justify-content: center;
  cursor: pointer;
  outline: 0;
}

.required::after {
  content: "*";
  color: red;
}
</style>