123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384 |
- <template>
- <div class="data-list">
- <div class="data-search">
- <el-form :inline="true" :model="queryForm" class="demo-form-inline">
- <el-form-item label="客户名称:">
- <el-input
- v-model="queryForm.name"
- placeholder="请选择客户名称"
- ></el-input>
- </el-form-item>
- <el-form-item label="状态:">
- <el-select
- v-model="queryForm.status"
- class="m-2"
- placeholder="请选择状态"
- size="large"
- >
- <el-option
- v-for="item in statusOptions"
- :key="item.value"
- :label="item.label"
- :value="item.value"
- />
- </el-select>
- </el-form-item>
- <el-form-item>
- <el-button type="primary" @click="onSubmit">
- <svg-icon icon-class="search" /> 搜索</el-button
- >
- <el-button type="danger" @click="resetQuery">
- <!-- <svg-icon icon-class="reset" /> -->重置</el-button
- >
- <el-button type="primary" @click="onAdd">
- <!-- <svg-icon icon-class="add" /> -->新增客户</el-button
- >
- </el-form-item>
- </el-form>
- </div>
- <el-table :data="dataList" style="width: 100%; margin-top: 20px">
- <el-table-column prop="code" label="客户编码" />
- <el-table-column prop="name" label="客户名称" />
- <el-table-column prop="contact" label="联系人" />
- <el-table-column prop="contactPosition" label="联系人职位" />
- <el-table-column prop="mobile" label="手机号码" />
- <el-table-column prop="address" label="地址" />
- <el-table-column prop="other" label="其他信息" />
- <el-table-column prop="createTime" label="创建时间" />
- <el-table-column prop="status" label="状态">
- <template #default="scope">
- {{ scope.row.status === 5 ? "启用" : "停用" }}
- </template>
- </el-table-column>
- <el-table-column label="操作" width="150">
- <template #default="scope">
- <el-button size="small" @click="handleEdit(scope.row)"
- >编辑</el-button
- >
- <el-button size="small" type="danger" @click="handleDelete(scope.row)"
- >删除</el-button
- >
- </template>
- </el-table-column>
- </el-table>
- <div class="page-info">
- <el-pagination
- :currentPage="queryForm.page"
- :page-size="queryForm.pageSize"
- :total="recordCount"
- :page-count="pageTotal"
- background
- layout="prev, pager, next"
- @current-change="ChangePage"
- >
- </el-pagination>
- </div>
- <el-dialog title="新增客户" :visible.sync="dialogVisible" width="50%">
- <el-form :model="customerForm" label-width="120px">
- <el-form-item label="客户编码" required>
- <el-input
- v-model="customerForm.code"
- placeholder="请输入客户编码"
- class="w_input"
- />
- </el-form-item>
- <el-form-item label="客户名称" required>
- <el-input
- v-model="customerForm.name"
- placeholder="请输入客户名称"
- class="w_input"
- />
- </el-form-item>
- <el-form-item label="联系人">
- <el-input
- v-model="customerForm.contact"
- placeholder="请输入联系人"
- class="w_input"
- />
- </el-form-item>
- <el-form-item label="联系人职位" required>
- <el-input
- v-model="customerForm.contact_position"
- placeholder="请输入联系人职位"
- class="w_input"
- />
- </el-form-item>
- <el-form-item label="手机号码">
- <el-input
- v-model="customerForm.mobile"
- placeholder="请输入手机号码"
- class="w_input"
- />
- </el-form-item>
- <el-form-item label="地址">
- <el-input
- v-model="customerForm.address"
- placeholder="请输入地址"
- class="w_input"
- />
- </el-form-item>
- <el-form-item label="其他信息">
- <el-input
- v-model="customerForm.other"
- placeholder="请输入其他信息"
- class="w_input"
- />
- </el-form-item>
- </el-form>
- <template #footer>
- <span class="dialog-footer">
- <el-button @click="dialogVisible = false">取消</el-button>
- <el-button type="primary" @click="handleCreate">确定</el-button>
- </span>
- </template>
- </el-dialog>
- </div>
- </template>
- <script>
- import {
- searchCustomer,
- syncCustomer,
- createCustomer,
- updateCustomer,
- deleteCustomer,
- } from "@/api/customer";
- /* import dataInfo from "./dataInfo.vue"; */
- import elDragDialog from "@/directive/el-drag-dialog";
- export default {
- /* components: {
- dataInfo,
- }, */
- directives: { elDragDialog },
- props: {
- queryForm: {
- type: Object,
- default: () => {
- return {
- page: 1,
- pageSize: 10,
- name: "",
- status: "",
- };
- },
- },
- },
- watch: {
- queryForm: {
- handler: function (val) {
- this.search();
- },
- // immediate: true,//立即执行
- deep: true,
- },
- },
- data() {
- return {
- currentDataId: 0,
- recordCount: 0,
- pageTotal: 1,
- dataList: [],
- currentData: {},
- statusOptions: [
- {
- value: "",
- label: "请选择状态",
- },
- {
- value: 5,
- label: "启用",
- },
- {
- value: 6,
- label: "停用",
- },
- ],
- dialogVisible: false,
- customerForm: {
- code: "",
- name: "",
- contact_position: "",
- mobile: "",
- contact: "",
- address: "",
- other: "",
- status:5
- },
- tableData: [], // Add tableData
- isEdit: false, // Add flag for edit mode
- };
- },
- mounted() {
- this.search();
- },
- methods: {
- // 处理创建/更新客户
- handleEdit(row) {
- this.isEdit = true;
- this.customerForm = { ...row, contact_position: row.contactPosition };
- this.dialogVisible = true;
- },
- handleDelete(row) {
- this.$confirm("确认删除该客户?", "提示", {
- confirmButtonText: "确定",
- cancelButtonText: "取消",
- type: "warning",
- }).then(() => {
- deleteCustomer({ id: row.id })
- .then(() => {
- this.$message.success("删除成功");
- this.search();
- })
- .catch(() => {
- this.$message.error("删除失败");
- });
- });
- },
- handleCreate() {
- const request = this.isEdit
- ? updateCustomer(this.customerForm)
- : createCustomer(this.customerForm);
- request
- .then(() => {
- this.$message.success(this.isEdit ? "更新成功" : "创建成功");
- this.dialogVisible = false;
- this.resetForm();
- this.search();
- })
- .catch(() => {
- this.$message.error(this.isEdit ? "更新失败" : "创建失败");
- });
- },
- onAdd() {
- this.isEdit = false;
- this.customerForm = {
- code: "",
- name: "",
- contact_position: "",
- mobile: "",
- contact: "",
- address: "",
- other: "",
- status:5
- };
- this.dialogVisible = true;
- },
- // 重置表单
- resetForm() {
- this.customerForm = {
- code: "",
- name: "",
- contact_position: "",
- mobile: "",
- contact: "",
- address: "",
- other: "",
- status:5
- };
- },
- // 搜索提交
- onSubmit() {
- // 重置页码
- this.queryForm.page = 1;
- // 构建搜索参数
- const searchParams = {
- ...this.queryForm,
- name: this.queryForm.name.trim(),
- status: this.queryForm.status,
- };
- // 移除空值参数
- Object.keys(searchParams).forEach((key) => {
- if (
- searchParams[key] === "" ||
- searchParams[key] === null ||
- searchParams[key] === undefined
- ) {
- delete searchParams[key];
- }
- });
- this.search();
- },
- // 重置搜索条件
- resetQuery() {
- this.queryForm = {
- page: 1,
- pageSize: 10,
- name: "",
- status: "",
- };
- this.onSubmit();
- },
- /* 搜索 */
- onSync(e) {
- let _this = this;
- syncCustomer().then((res) => {
- console.log("res", res);
- });
- },
- onFocusVal(e) {
- let _this = this;
- _this.currentDataId = e.target.dataset.id;
- },
- onChangeVal(e) {
- let _this = this;
- let par = {
- id: _this.currentDataId,
- val: e,
- };
- },
- searchData() {
- let _this = this;
- _this.dialogVisible = false;
- _this.search();
- },
- //编辑
- btnEdit(e) {
- let _this = this;
- _this.currentDataId = e.id;
- _this.dialogVisible = true;
- },
- onClose() {
- let _this = this;
- _this.currentDataId = 0;
- _this.dialogVisible = false;
- },
- //搜索
- search() {
- let _this = this;
- searchCustomer(_this.queryForm).then((res) => {
- // if(!res)return;
- _this.dataList = res.data.dataList;
- _this.recordCount = res.data.totalRecord;
- _this.pageTotal = res.data.totalPage;
- });
- },
- //修改分页
- ChangePage(e) {
- let _this = this;
- _this.queryForm.page = e;
- _this.search();
- },
- },
- };
- </script>
- <style lang="scss">
- @import "./dataList.scss";
- </style>
|