dataSearch.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153
  1. <template>
  2. <div class="data-search">
  3. <el-form :inline="true" :model="queryForm" class="demo-form-inline">
  4. <el-form-item label="客户名称:">
  5. <el-input
  6. v-model="queryForm.name"
  7. placeholder="请选择客户名称"
  8. ></el-input>
  9. </el-form-item>
  10. <el-form-item label="状态:">
  11. <el-select
  12. v-model="queryForm.status"
  13. class="m-2"
  14. placeholder="请选择状态"
  15. size="large"
  16. >
  17. <el-option
  18. v-for="item in statusOptions"
  19. :key="item.value"
  20. :label="item.label"
  21. :value="item.value"
  22. />
  23. </el-select>
  24. </el-form-item>
  25. <el-form-item>
  26. <el-button type="primary" @click="onSubmit">
  27. <svg-icon icon-class="search" /> 搜索</el-button
  28. >
  29. <el-button type="primary" @click="onAdd">
  30. <svg-icon icon-class="add" />新增客户</el-button
  31. >
  32. </el-form-item>
  33. </el-form>
  34. <el-dialog title="新增客户" v-model="dialogVisible" width="50%">
  35. <el-form :model="customerForm" label-width="120px">
  36. <el-form-item label="客户编码" required>
  37. <el-input v-model="customerForm.code" placeholder="请输入客户编码" />
  38. </el-form-item>
  39. <el-form-item label="客户名称" required>
  40. <el-input v-model="customerForm.name" placeholder="请输入客户名称" />
  41. </el-form-item>
  42. <el-form-item label="英文名称" required>
  43. <el-input
  44. v-model="customerForm.en_name"
  45. placeholder="请输入英文名称"
  46. />
  47. </el-form-item>
  48. <el-form-item label="手机号码" required>
  49. <el-input
  50. v-model="customerForm.mobile"
  51. placeholder="请输入手机号码"
  52. />
  53. </el-form-item>
  54. <el-form-item label="联系人" required>
  55. <el-input v-model="customerForm.contact" placeholder="请输入联系人" />
  56. </el-form-item>
  57. <el-form-item label="地址" required>
  58. <el-input v-model="customerForm.address" placeholder="请输入地址" />
  59. </el-form-item>
  60. <el-form-item label="其他信息">
  61. <el-input v-model="customerForm.other" placeholder="请输入其他信息" />
  62. </el-form-item>
  63. </el-form>
  64. <template #footer>
  65. <span class="dialog-footer">
  66. <el-button @click="dialogVisible = false">取消</el-button>
  67. <el-button type="primary" @click="handleCreate">确定</el-button>
  68. </span>
  69. </template>
  70. </el-dialog>
  71. </div>
  72. </template>
  73. <script>
  74. import { syncCustomer, create,update } from "@/api/customer";
  75. export default {
  76. props: {
  77. queryForm: {
  78. type: Object,
  79. default: () => {
  80. return {
  81. page: 1,
  82. pageSize: 10,
  83. name: "",
  84. status: "",
  85. };
  86. },
  87. },
  88. },
  89. data() {
  90. return {
  91. statusOptions: [
  92. {
  93. value: "",
  94. label: "请选择状态",
  95. },
  96. {
  97. value: 5,
  98. label: "启用",
  99. },
  100. {
  101. value: 6,
  102. label: "停用",
  103. },
  104. ],
  105. dialogVisible: false,
  106. customerForm: {
  107. code: "",
  108. name: "",
  109. en_name: "",
  110. mobile: "",
  111. contact: "",
  112. address: "",
  113. other: "",
  114. },
  115. };
  116. },
  117. created() {},
  118. methods: {
  119. handleCreate() {
  120. createCustomer(this.customerForm)
  121. .then((res) => {
  122. this.$message.success("创建成功");
  123. this.dialogVisible = false;
  124. this.$emit("bindSetQuery", this.$props.queryForm); // 刷新列表
  125. })
  126. .catch((err) => {
  127. this.$message.error("创建失败");
  128. });
  129. },
  130. onAdd() {},
  131. onSync(e) {
  132. let _this = this;
  133. syncCustomer().then((res) => {
  134. console.log("res", res);
  135. });
  136. },
  137. onCreate(e) {
  138. this.dialogVisible = true;
  139. },
  140. //搜索
  141. onSubmit() {
  142. this.$emit("bindSetQuery", this.$props.queryForm);
  143. },
  144. },
  145. };
  146. </script>
  147. <style lang="scss">
  148. @import "./dataSearch.scss";
  149. </style>