dataList.vue 9.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384
  1. <template>
  2. <div class="data-list">
  3. <div class="data-search">
  4. <el-form :inline="true" :model="queryForm" class="demo-form-inline">
  5. <el-form-item label="客户名称:">
  6. <el-input
  7. v-model="queryForm.name"
  8. placeholder="请选择客户名称"
  9. ></el-input>
  10. </el-form-item>
  11. <el-form-item label="状态:">
  12. <el-select
  13. v-model="queryForm.status"
  14. class="m-2"
  15. placeholder="请选择状态"
  16. size="large"
  17. >
  18. <el-option
  19. v-for="item in statusOptions"
  20. :key="item.value"
  21. :label="item.label"
  22. :value="item.value"
  23. />
  24. </el-select>
  25. </el-form-item>
  26. <el-form-item>
  27. <el-button type="primary" @click="onSubmit">
  28. <svg-icon icon-class="search" /> 搜索</el-button
  29. >
  30. <el-button type="danger" @click="resetQuery">
  31. <!-- <svg-icon icon-class="reset" /> -->重置</el-button
  32. >
  33. <el-button type="primary" @click="onAdd">
  34. <!-- <svg-icon icon-class="add" /> -->新增客户</el-button
  35. >
  36. </el-form-item>
  37. </el-form>
  38. </div>
  39. <el-table :data="dataList" style="width: 100%; margin-top: 20px">
  40. <el-table-column prop="code" label="客户编码" />
  41. <el-table-column prop="name" label="客户名称" />
  42. <el-table-column prop="contact" label="联系人" />
  43. <el-table-column prop="contactPosition" label="联系人职位" />
  44. <el-table-column prop="mobile" label="手机号码" />
  45. <el-table-column prop="address" label="地址" />
  46. <el-table-column prop="other" label="其他信息" />
  47. <el-table-column prop="createTime" label="创建时间" />
  48. <el-table-column prop="status" label="状态">
  49. <template #default="scope">
  50. {{ scope.row.status === 5 ? "启用" : "停用" }}
  51. </template>
  52. </el-table-column>
  53. <el-table-column label="操作" width="150">
  54. <template #default="scope">
  55. <el-button size="small" @click="handleEdit(scope.row)"
  56. >编辑</el-button
  57. >
  58. <el-button size="small" type="danger" @click="handleDelete(scope.row)"
  59. >删除</el-button
  60. >
  61. </template>
  62. </el-table-column>
  63. </el-table>
  64. <div class="page-info">
  65. <el-pagination
  66. :currentPage="queryForm.page"
  67. :page-size="queryForm.pageSize"
  68. :total="recordCount"
  69. :page-count="pageTotal"
  70. background
  71. layout="prev, pager, next"
  72. @current-change="ChangePage"
  73. >
  74. </el-pagination>
  75. </div>
  76. <el-dialog title="新增客户" :visible.sync="dialogVisible" width="50%">
  77. <el-form :model="customerForm" label-width="120px">
  78. <el-form-item label="客户编码" required>
  79. <el-input
  80. v-model="customerForm.code"
  81. placeholder="请输入客户编码"
  82. class="w_input"
  83. />
  84. </el-form-item>
  85. <el-form-item label="客户名称" required>
  86. <el-input
  87. v-model="customerForm.name"
  88. placeholder="请输入客户名称"
  89. class="w_input"
  90. />
  91. </el-form-item>
  92. <el-form-item label="联系人">
  93. <el-input
  94. v-model="customerForm.contact"
  95. placeholder="请输入联系人"
  96. class="w_input"
  97. />
  98. </el-form-item>
  99. <el-form-item label="联系人职位" required>
  100. <el-input
  101. v-model="customerForm.contact_position"
  102. placeholder="请输入联系人职位"
  103. class="w_input"
  104. />
  105. </el-form-item>
  106. <el-form-item label="手机号码">
  107. <el-input
  108. v-model="customerForm.mobile"
  109. placeholder="请输入手机号码"
  110. class="w_input"
  111. />
  112. </el-form-item>
  113. <el-form-item label="地址">
  114. <el-input
  115. v-model="customerForm.address"
  116. placeholder="请输入地址"
  117. class="w_input"
  118. />
  119. </el-form-item>
  120. <el-form-item label="其他信息">
  121. <el-input
  122. v-model="customerForm.other"
  123. placeholder="请输入其他信息"
  124. class="w_input"
  125. />
  126. </el-form-item>
  127. </el-form>
  128. <template #footer>
  129. <span class="dialog-footer">
  130. <el-button @click="dialogVisible = false">取消</el-button>
  131. <el-button type="primary" @click="handleCreate">确定</el-button>
  132. </span>
  133. </template>
  134. </el-dialog>
  135. </div>
  136. </template>
  137. <script>
  138. import {
  139. searchCustomer,
  140. syncCustomer,
  141. createCustomer,
  142. updateCustomer,
  143. deleteCustomer,
  144. } from "@/api/customer";
  145. /* import dataInfo from "./dataInfo.vue"; */
  146. import elDragDialog from "@/directive/el-drag-dialog";
  147. export default {
  148. /* components: {
  149. dataInfo,
  150. }, */
  151. directives: { elDragDialog },
  152. props: {
  153. queryForm: {
  154. type: Object,
  155. default: () => {
  156. return {
  157. page: 1,
  158. pageSize: 10,
  159. name: "",
  160. status: "",
  161. };
  162. },
  163. },
  164. },
  165. watch: {
  166. queryForm: {
  167. handler: function (val) {
  168. this.search();
  169. },
  170. // immediate: true,//立即执行
  171. deep: true,
  172. },
  173. },
  174. data() {
  175. return {
  176. currentDataId: 0,
  177. recordCount: 0,
  178. pageTotal: 1,
  179. dataList: [],
  180. currentData: {},
  181. statusOptions: [
  182. {
  183. value: "",
  184. label: "请选择状态",
  185. },
  186. {
  187. value: 5,
  188. label: "启用",
  189. },
  190. {
  191. value: 6,
  192. label: "停用",
  193. },
  194. ],
  195. dialogVisible: false,
  196. customerForm: {
  197. code: "",
  198. name: "",
  199. contact_position: "",
  200. mobile: "",
  201. contact: "",
  202. address: "",
  203. other: "",
  204. status:5
  205. },
  206. tableData: [], // Add tableData
  207. isEdit: false, // Add flag for edit mode
  208. };
  209. },
  210. mounted() {
  211. this.search();
  212. },
  213. methods: {
  214. // 处理创建/更新客户
  215. handleEdit(row) {
  216. this.isEdit = true;
  217. this.customerForm = { ...row, contact_position: row.contactPosition };
  218. this.dialogVisible = true;
  219. },
  220. handleDelete(row) {
  221. this.$confirm("确认删除该客户?", "提示", {
  222. confirmButtonText: "确定",
  223. cancelButtonText: "取消",
  224. type: "warning",
  225. }).then(() => {
  226. deleteCustomer({ id: row.id })
  227. .then(() => {
  228. this.$message.success("删除成功");
  229. this.search();
  230. })
  231. .catch(() => {
  232. this.$message.error("删除失败");
  233. });
  234. });
  235. },
  236. handleCreate() {
  237. const request = this.isEdit
  238. ? updateCustomer(this.customerForm)
  239. : createCustomer(this.customerForm);
  240. request
  241. .then(() => {
  242. this.$message.success(this.isEdit ? "更新成功" : "创建成功");
  243. this.dialogVisible = false;
  244. this.resetForm();
  245. this.search();
  246. })
  247. .catch(() => {
  248. this.$message.error(this.isEdit ? "更新失败" : "创建失败");
  249. });
  250. },
  251. onAdd() {
  252. this.isEdit = false;
  253. this.customerForm = {
  254. code: "",
  255. name: "",
  256. contact_position: "",
  257. mobile: "",
  258. contact: "",
  259. address: "",
  260. other: "",
  261. status:5
  262. };
  263. this.dialogVisible = true;
  264. },
  265. // 重置表单
  266. resetForm() {
  267. this.customerForm = {
  268. code: "",
  269. name: "",
  270. contact_position: "",
  271. mobile: "",
  272. contact: "",
  273. address: "",
  274. other: "",
  275. status:5
  276. };
  277. },
  278. // 搜索提交
  279. onSubmit() {
  280. // 重置页码
  281. this.queryForm.page = 1;
  282. // 构建搜索参数
  283. const searchParams = {
  284. ...this.queryForm,
  285. name: this.queryForm.name.trim(),
  286. status: this.queryForm.status,
  287. };
  288. // 移除空值参数
  289. Object.keys(searchParams).forEach((key) => {
  290. if (
  291. searchParams[key] === "" ||
  292. searchParams[key] === null ||
  293. searchParams[key] === undefined
  294. ) {
  295. delete searchParams[key];
  296. }
  297. });
  298. this.search();
  299. },
  300. // 重置搜索条件
  301. resetQuery() {
  302. this.queryForm = {
  303. page: 1,
  304. pageSize: 10,
  305. name: "",
  306. status: "",
  307. };
  308. this.onSubmit();
  309. },
  310. /* 搜索 */
  311. onSync(e) {
  312. let _this = this;
  313. syncCustomer().then((res) => {
  314. console.log("res", res);
  315. });
  316. },
  317. onFocusVal(e) {
  318. let _this = this;
  319. _this.currentDataId = e.target.dataset.id;
  320. },
  321. onChangeVal(e) {
  322. let _this = this;
  323. let par = {
  324. id: _this.currentDataId,
  325. val: e,
  326. };
  327. },
  328. searchData() {
  329. let _this = this;
  330. _this.dialogVisible = false;
  331. _this.search();
  332. },
  333. //编辑
  334. btnEdit(e) {
  335. let _this = this;
  336. _this.currentDataId = e.id;
  337. _this.dialogVisible = true;
  338. },
  339. onClose() {
  340. let _this = this;
  341. _this.currentDataId = 0;
  342. _this.dialogVisible = false;
  343. },
  344. //搜索
  345. search() {
  346. let _this = this;
  347. searchCustomer(_this.queryForm).then((res) => {
  348. // if(!res)return;
  349. _this.dataList = res.data.dataList;
  350. _this.recordCount = res.data.totalRecord;
  351. _this.pageTotal = res.data.totalPage;
  352. });
  353. },
  354. //修改分页
  355. ChangePage(e) {
  356. let _this = this;
  357. _this.queryForm.page = e;
  358. _this.search();
  359. },
  360. },
  361. };
  362. </script>
  363. <style lang="scss">
  364. @import "./dataList.scss";
  365. </style>