工时管理30%

spring

2025-02-15 74da5f0d434681ca8e9090e242e7fd29c144ebcb

 src/views/system/customer/index.vue

@@ -2,26 +2,61 @@
  <div class="app-container">
    <div class="search">
      <div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
        <el-form
          :model="queryParams"
          ref="queryForm"
          size="small"
          :inline="true"
        >
          <el-form-item label="客户名称" prop="company">
            <el-input size="small" placeholder="请输入" clearable v-model="queryParams.company"
                      @keyup.enter.native="getList"></el-input>
            <el-input
              size="small"
              placeholder="请输入"
              clearable
              v-model="queryParams.company"
              @keyup.enter.native="getList"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="getList">查 询</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="refresh">重 置</el-button>
            <el-button
              type="primary"
              icon="el-icon-search"
              size="mini"
              @click="getList"
              >查 询</el-button
            >
            <el-button icon="el-icon-refresh" size="mini" @click="refresh"
              >重 置</el-button
            >
          </el-form-item>
        </el-form>
      </div>
      <div>
        <el-button size="small" type="primary" @click="openFormDia('add')" icon="el-icon-plus">新增</el-button>
        <el-button
          size="small"
          type="primary"
          @click="openFormDia('add')"
          icon="el-icon-plus"
          >新增</el-button
        >
      </div>
    </div>
    <div>
      <lims-table :tableData="tableData" :column="column" :page="page" :tableLoading="tableLoading"></lims-table>
      <lims-table
        :tableData="tableData"
        :column="column"
        :page="page"
        :tableLoading="tableLoading"
      ></lims-table>
    </div>
    <el-dialog :title="formTitle" :visible.sync="addDia" width="450px">
      <el-form ref="userForm" :model="user" :rules="userRules" label-position="right" label-width="100px">
      <el-form
        ref="userForm"
        :model="user"
        :rules="userRules"
        label-position="right"
        label-width="100px"
      >
        <el-form-item label="客户名称" prop="company">
          <el-input v-model="user.company" size="small" clearable></el-input>
        </el-form-item>
@@ -29,12 +64,22 @@
          <el-input v-model="user.companyEn" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="单位地址" prop="address">
          <el-input type="textarea" v-model="user.address" size="small" clearable
                    :autosize="{minRows: 2, maxRows: 4}"></el-input>
          <el-input
            type="textarea"
            v-model="user.address"
            size="small"
            clearable
            :autosize="{ minRows: 2, maxRows: 4 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位地址EN" prop="addressEn">
          <el-input type="textarea" v-model="user.addressEn" size="small" clearable
                    :autosize="{minRows: 2, maxRows: 4}"></el-input>
          <el-input
            type="textarea"
            v-model="user.addressEn"
            size="small"
            clearable
            :autosize="{ minRows: 2, maxRows: 4 }"
          ></el-input>
        </el-form-item>
        <el-form-item label="单位电话" prop="phone">
          <el-input v-model="user.phone" size="small" clearable></el-input>
@@ -50,133 +95,155 @@
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="reset">取 消</el-button>
            <el-button type="primary" @click="customAdd" :loading="loading">确 定</el-button>
         </span>
        <el-button @click="reset">取 消</el-button>
        <el-button type="primary" @click="customAdd" :loading="loading"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import limsTable from '@/components/Table/lims-table.vue'
import {addCustom, selectCustomPageList, upCustom} from "@/api/system/customer";
import limsTable from "@/components/Table/lims-table.vue";
import {
  addCustom,
  selectCustomPageList,
  upCustom,
} from "@/api/system/customer";
export default {
  components: {
    limsTable
    limsTable,
  },
  data() {
    return {
      queryParams: {
        company: ''
        company: "",
      },
      tableData: [],
      column: [
        {label: '客户名称', prop: 'company'},
        {label: '客户单位EN', prop: 'companyEn'},
        {label: '单位地址', prop: 'address'},
        {label: '单位地址EN', prop: 'addressEn'},
        {label: '单位电话', prop: 'phone'},
        {label: '加急额度', prop: 'num'},
        {label: '客户编号', prop: 'code2'},
        {label: '工厂域', prop: 'code'},
        { label: "客户名称", prop: "company" },
        { label: "客户单位EN", prop: "companyEn" },
        { label: "单位地址", prop: "address" },
        { label: "单位地址EN", prop: "addressEn" },
        { label: "单位电话", prop: "phone" },
        { label: "加急额度", prop: "num" },
        { label: "客户编号", prop: "code2" },
        { label: "工厂域", prop: "code" },
        {
          dataType: 'action',
          fixed: 'right',
          label: '操作',
          dataType: "action",
          fixed: "right",
          label: "操作",
          operation: [
            {
              name: '编辑',
              type: 'text',
              name: "编辑",
              type: "text",
              clickFun: (row) => {
                this.openFormDia('edit', row);
                this.openFormDia("edit", row);
              },
            },
          ]
        }
          ],
        },
      ],
      page: {
        total:0,
        size:10,
        current:0
        total: 0,
        size: 10,
        current: 0,
      },
      tableLoading: false,
      // 编辑客户弹框
      operationType: '',
      formTitle: '',
      operationType: "",
      formTitle: "",
      addDia: false,
      addPower: true,
      user: {
        name: null
      },
      user: {},
      userRules: {
        company: [{ required: true, message: '请输入客户名称', trigger: 'blur' }],
        companyEn: [{ required: true, message: '请输入客户名称EN', trigger: 'blur' }],
        address: [{ required: true, message: '请输入单位地址', trigger: 'blur' }],
        addressEn: [{ required: true, message: '请输单位地址EN', trigger: 'blur' }],
        num: [{ required: true, message: '请输入加急额度', trigger: 'blur' }],
        code2: [{ required: true, message: '请输入客户编号', trigger: 'blur' }],
        company: [
          { required: true, message: "请输入客户名称", trigger: "blur" },
        ],
        companyEn: [
          { required: true, message: "请输入客户名称EN", trigger: "blur" },
        ],
        address: [
          { required: true, message: "请输入单位地址", trigger: "blur" },
        ],
        addressEn: [
          { required: true, message: "请输单位地址EN", trigger: "blur" },
        ],
        num: [{ required: true, message: "请输入加急额度", trigger: "blur" }],
        code2: [{ required: true, message: "请输入客户编号", trigger: "blur" }],
      },
      loading: false,
      //
    }
    };
  },
  mounted() {
    this.getList()
    this.getList();
  },
  methods: {
    // 查询客户列表
    getList() {
      this.tableLoading = true
      selectCustomPageList({...this.queryParams, ...this.page}).then(res => {
        this.tableLoading = false
        if (res.code === 200) {
          this.tableData = res.data
          this.page.total = res.total
        }
      }).catch(err => {
        this.tableLoading = false
      })
      this.tableLoading = true;
      selectCustomPageList({ ...this.queryParams, ...this.page })
        .then((res) => {
          this.tableLoading = false;
          if (res.code === 200) {
            this.tableData = res.data;
            this.page.total = res.total;
          }
        })
        .catch((err) => {
          this.tableLoading = false;
        });
    },
    // 重置table
    refresh() {
      this.queryParams.company = ''
      this.getList()
      this.queryParams.company = "";
      this.getList();
    },
    openFormDia (type, row) {
      this.addDia = true
      this.formTitle = type === 'add' ? '新增客户' : '编辑客户'
      this.operationType = type
    openFormDia(type, row) {
      this.addDia = true;
      this.formTitle = type === "add" ? "新增客户" : "编辑客户";
      this.operationType = type;
    },
    customAdd() {
      this.$refs['userForm'].validate((valid) => {
      this.$refs["userForm"].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.operationType === 'add') {
            addCustom(this.user).then(res => {
              if (res.code === 201) return
              this.$message.success('新增成功')
              this.getList()
              this.loading = false
              this.reset()
            })
          this.loading = true;
          if (this.operationType === "add") {
            addCustom(this.user)
              .then((res) => {
                this.loading = false;
                if (res.code !== 200) return;
                this.$message.success("新增成功");
                this.getList();
                this.reset();
              })
              .catch((err) => {
                this.loading = false;
              });
          } else {
            upCustom(this.user).then(res => {
              if (res.code === 201) return
              this.$message.success('修改成功')
              this.getList()
              this.loading = false
              this.reset()
            })
            upCustom(this.user)
              .then((res) => {
                this.loading = false;
                if (res.code !== 200) return;
                this.$message.success("修改成功");
                this.getList();
                this.reset();
              })
              .catch((err) => {
                this.loading = false;
              });
          }
        }
      })
      });
    },
    reset () {
      this.addDia = false
    reset() {
      this.addDia = false;
      this.resetForm("userForm");
    }
  }
}
    },
  },
};
</script>

<style scoped>