客户管理页面联调

gaoluyang

2025-02-13 edc00525eeb2dd3a92b321e116ad97620adafee4

 src/views/system/customer/index.vue

@@ -3,309 +3,177 @@
    <div class="search">
      <div>
        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true">
          <el-form-item label="状态" prop="state">
          <el-form-item label="客户名称" prop="company">
            <el-input size="small" placeholder="请输入" clearable v-model="queryParams.company"
                      @keyup.enter.native="refreshTable()"></el-input>
                      @keyup.enter.native="getList"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="refreshTable">查 询</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="addDia = true" v-if="addPower" icon="el-icon-plus">新增</el-button>
        <el-button size="small" type="primary" @click="openFormDia('add')" icon="el-icon-plus">新增</el-button>
      </div>
    </div>
<!--    <div class="table">-->
<!--      <ValueTable ref="ValueTable" :url="$api.user.selectCustomPageList" :delUrl="$api.user.delCustomById"-->
<!--                  :componentData="componentData" :key="upIndex" :upUrl="$api.user.upCustom"/>-->
<!--    </div>-->
    <el-dialog title="新增客户" :visible.sync="addDia" width="450px">
      <div style="margin-bottom: 15px;">
        <el-row style="line-height: 50px;">
          <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
                  </span>客户名称：</el-col>
          <el-col :span="15">
            <el-input v-model="user.company" size="small" clearable></el-input>
          </el-col>
        </el-row>
        <el-row style="line-height: 50px;">
          <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
                  </span>客户单位EN：</el-col>
          <el-col :span="15">
            <el-input v-model="user.companyEn" size="small" clearable></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px;">
          <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
                  </span>单位地址：</el-col>
          <el-col :span="15">
            <el-input type="textarea" v-model="user.address" size="small" clearable
                      :autosize="{minRows: 2, maxRows: 4}"></el-input>
          </el-col>
        </el-row>
        <el-row style="margin-top: 15px;">
          <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
                  </span>客户地址EN：</el-col>
          <el-col :span="15">
            <el-input type="textarea" v-model="user.addressEn" size="small" clearable
                      :autosize="{minRows: 2, maxRows: 4}"></el-input>
          </el-col>
        </el-row>
        <el-row style="line-height: 50px;">
          <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
              </span>加急额度：</el-col>
          <el-col :span="15">
            <el-input v-model="user.num" size="small" clearable></el-input>
          </el-col>
        </el-row>
        <el-row style="line-height: 50px;">
          <el-col :span="7" style="text-align: right;padding-right: 8px;">单位电话：</el-col>
          <el-col :span="15">
            <el-input v-model="user.phone" size="small" clearable></el-input>
          </el-col>
        </el-row>
        <el-row style="line-height: 50px;">
          <el-col :span="7" style="text-align: right;padding-right: 8px;">工厂域：</el-col>
          <el-col :span="15">
            <el-input v-model="user.code" size="small" clearable></el-input>
          </el-col>
        </el-row>
        <el-row style="line-height: 50px;">
          <el-col :span="7" style="text-align: right;padding-right: 8px;"><span class="required-span">*
              </span>客户编号：</el-col>
          <el-col :span="15">
            <el-input v-model="user.code2" size="small" clearable></el-input>
          </el-col>
        </el-row>
      </div>
    <div>
      <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-item label="客户名称" prop="company">
          <el-input v-model="user.company" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户单位EN" prop="companyEn">
          <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-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-form-item>
        <el-form-item label="单位电话" prop="phone">
          <el-input v-model="user.phone" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="加急额度" prop="num">
          <el-input v-model="user.num" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="客户编号" prop="code2">
          <el-input v-model="user.code2" size="small" clearable></el-input>
        </el-form-item>
        <el-form-item label="工厂域" prop="code">
          <el-input v-model="user.code" size="small" clearable></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
            <el-button @click="addDia = false">取 消</el-button>
            <el-button @click="reset">取 消</el-button>
            <el-button type="primary" @click="customAdd" :loading="loading">确 定</el-button>
         </span>
    </el-dialog>
    <el-dialog title="选择用户" :visible.sync="selectUserDia" width="70%">
      <div class="search" style="height: 35px; margin-bottom: 9px;">
        <div class="search_thing">
          <div class="search_label">用户名：</div>
          <div class="search_input"><el-input size="small" placeholder="请输入" clearable
                                              v-model="componentData2.entity.name" @keyup.enter.native="$refs.ValueTable2.selectList()"></el-input></div>
        </div>
      </div>
<!--      <div class="body" style="height: 60vh;" v-if="selectUserDia">-->
<!--        <ValueTable ref="ValueTable2" :url="$api.user.selectUserList" :componentData="componentData2" />-->
<!--      </div>-->
      <span slot="footer" class="dialog-footer">
            <el-button @click="selectUserDia = false">取 消</el-button>
            <el-button type="primary" @click="selectUser">确 定</el-button>
         </span>
    </el-dialog>
  </div>
</template>

<script>
import ValueTable from '@/components/Table/value-table.vue'
import limsTable from '@/components/Table/lims-table.vue'
import {addCustom, selectCustomPageList, upCustom} from "@/api/system/customer";
export default {
  components: {
    ValueTable
    limsTable
  },
  data() {
    return {
      queryParams: {
        company: ''
      },
      componentData: {
        entity: {
          company: null,
          orderBy: {
            field: 'id',
            order: 'asc'
          }
        },
        isIndex: true,
        showSelect: false,
        select: false,
        do: [{
          font: '委托记录',
          type: 'text',
          method: 'entrust'
        }, {
          font: '协议记录',
          type: 'text',
          method: 'protocol'
        },{
          id: 'update',
          font: '编辑',
          type: 'text',
          method: 'doDiy',
          field:[]
        },{
          id: 'delete',
          font: '删除',
          type: 'text',
          method: 'doDiy'
        }],
        tagField: {
          state: {
            select: [{
              value: 1,
              type: 'success',
              label: '启用'
            }, {
              value: 0,
              type: 'danger',
              label: '停用'
            }]
          }
        },
        selectField: {
          state: {
            select: [{
              value: 1,
              type: 'success',
              label: '启用'
            }, {
              value: 0,
              type: 'danger',
              label: '停用'
            }]
          }
        },
        requiredAdd: [],
        requiredUp: ['company','address','code2','companyEn','addressEn','num']
      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'},
        {
          dataType: 'action',
          fixed: 'right',
          label: '操作',
          operation: [
            {
              name: '编辑',
              type: 'text',
              clickFun: (row) => {
                this.openFormDia('edit', row);
              },
            },
          ]
        }
      ],
      page: {
        total:0,
        size:10,
        current:0
      },
      entityCopy: {},
      upIndex: 0,
      tableLoading: false,
      // 编辑客户弹框
      operationType: '',
      formTitle: '',
      addDia: false,
      addPower: true,
      user: {
        name: null
      },
      selectUserDia: false,
      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' }],
      },
      loading: false,
      componentData2: {
        entity: {
          isCustom: 0,
          orderBy: {
            field: 'id',
            order: 'asc'
          }
        },
        isIndex: true,
        showSelect: true,
        select: false,
        do: [],
        tagField: {
          state: {
            select: [{
              value: 1,
              type: 'success',
              label: '启用'
            }, {
              value: 0,
              type: 'danger',
              label: '停用'
            }]
          }
        },
        selectField: {},
        needSort: ['company'],
      }
      //
    }
  },
  mounted() {
    this.entityCopy = this.HaveJson(this.componentData.entity)
    this.getPower()
    this.getList()
  },
  methods: {
    refreshTable() {
      this.$refs['ValueTable'].selectList()
    },
    refresh() {
      this.componentData.entity = this.HaveJson(this.entityCopy)
      this.upIndex++
    },
    customAdd() {
      if (this.user.company == '' || this.user.company == null) {
        this.$message.error('请填写客户单位')
        return
      }
      if (this.user.address == '' || this.user.address == null) {
        this.$message.error('请填写单位地址')
        return
      }
      if (this.user.companyEn == '' || this.user.companyEn == null) {
        this.$message.error('请填写英文客户单位')
        return
      }
      if (this.user.addressEn == '' || this.user.addressEn == null) {
        this.$message.error('请填写英文单位地址')
        return
      }
      if (this.user.code2 == '' || this.user.code2 == null) {
        this.$message.error('请填写客户编号')
        return
      }
      if (this.user.code2 == '' || this.user.code2 == null) {
        this.$message.error('请填写加急额度')
        return
      }
      this.loading = true
      this.$axios.post(this.$api.user.addCustom, this.user, {
        headers: {
          'Content-Type': 'application/json'
    // 查询客户列表
    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
        }
      }).then(res => {
        if (res.code == 201) return
        this.$message.success('添加成功')
        this.refreshTable()
        this.loading = false
        this.addDia = false
      }).catch(err => {
        this.tableLoading = false
      })
    },
    // 权限分配
    getPower() {
      let power = JSON.parse(sessionStorage.getItem('power'))
      let up = false
      let del = false
      let add = false
      for (var i = 0; i < power.length; i++) {
        if (power[i].menuMethod == 'delCustomById') {
          del = true
        }
        if (power[i].menuMethod == 'addCustom') {
          add = true
        }
        if (power[i].menuMethod == 'upCustom') {
          up = true
        }
      }
      if (!del) {
        this.componentData.do.splice(3, 1)
      }
      if (!up) {
        this.componentData.do.splice(2, 1)
      }
      this.addPower = add
    // 重置table
    refresh() {
      this.queryParams.company = ''
      this.getList()
    },
    entrust(data) {

    openFormDia (type, row) {
      this.addDia = true
      this.formTitle = type === 'add' ? '新增客户' : '编辑客户'
      this.operationType = type
    },
    protocol(data) {

    customAdd() {
      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()
            })
          } else {
            upCustom(this.user).then(res => {
              if (res.code === 201) return
              this.$message.success('修改成功')
              this.getList()
              this.loading = false
              this.reset()
            })
          }
        }
      })
    },
    selectUser() {
      let selects = this.$refs.ValueTable2.multipleSelection
      if (selects.length == 0) {
        this.$message.error('未选择数据')
        return
      }
      delete selects['orderBy']
      delete selects['updateUser']
      delete selects['updateTime']
      this.user = selects
      this.selectUserDia = false
    reset () {
      this.addDia = false
      this.resetForm("userForm");
    }
  }
}
@@ -313,7 +181,7 @@

<style scoped>
.search {
  height: 80px;
  height: 46px;
  display: flex;
  justify-content: space-between;
}