Vue：快捷文本

前端首页

<template>
  <div class="app-container">
    <el-form ref="queryForm" :model="queryParams" :inline="true">
      <el-form-item label="供应商名称" prop="mc">
        <el-input v-model="queryParams.mc" placeholder="供应商名称"/>
      el-form-item>
      <el-form-item label="供应商类型" prop="lx">
        <el-select v-model="queryParams.lx" placeholder="供应商类型">
          <el-option v-for="item in lxOperations" :key="item.value" :label="item.label" :value="item.value">
          el-option>
        el-select>
      el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" size="small" @click="handleQuery">搜索el-button>
        <el-button icon="el-icon-refresh" size="small" @click="resetQuery">重置el-button>
      el-form-item>
    el-form>
    
    <el-row>
      <el-row :gutter="10">
        <el-col :span="1.5">
          <el-button type="primary" plain icon="el-icon-plus" size="mini" @click="handleAdd" v-hasPermi="['jcpz:gyspz:add']">新增el-button>
        el-col>
        <el-col :span="1.5">
          <el-button type="success" plain icon="el-icon-edit" size="mini" @click="handleUpdate" :disabled="single" v-hasPermi="['jcpz:gyspz:edit']">修改el-button>
        el-col>
        <el-col :span="1.5">
          <el-button type="danger" plain icon="el-icon-delete" size="mini" @click="handleDelete" :disabled="multiple" v-hasPermi="['jcpz:gyspz:remove']">删除el-button>
        el-col>
        <el-col :span="1.5">
          <el-button type="warning" plain icon="el-icon-download" size="mini" @click="handleExport" v-hasPermi="['jcpz:gyspz:export']">导出el-button>
        el-col>
      el-row>
    el-row>
    
    <el-table  v-loading="loading" :data="dataList"  row-key="bbm" :header-cell-style="{ background: '#eef1f6', color: '#606266', 'text-align': 'center' }" @selection-change="handleSelectionChange" style="width: 100%;margin-top:5px" :height="tableHeight">
      <el-table-column type="selection" width="50" align="center" />
      <el-table-column label="序号" align="center" width="70px">
        <template #default="scope">
          <span>{{ (queryParams.pageNum - 1) * (queryParams.pageSize) + scope.$index + 1 }}span>
        template>
      el-table-column>
      <el-table-column label="供应商名称" align="center" prop="mc" :show-overflow-tooltip="true" />
      <el-table-column label="联系电话" align="center" prop="lxdh" :show-overflow-tooltip="true" />
      <el-table-column label="地址" align="center" prop="dz" :show-overflow-tooltip="true" />
      <el-table-column label="供应商类型" align="center" prop="lx" :show-overflow-tooltip="true">
        <template slot-scope="scope">
          <div v-if="scope.row.lx == '0'" style="color: #1c84c6">供应商div>
          <div v-if="scope.row.lx == '1'" style="color: #0ba32f">销售对象div>
        template>
      el-table-column>
    el-table>
    
    <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    
    <add-edit ref="addEdit" @success_="getList">add-edit>
  div>
template>
<script>
import addEdit from './dataM.vue'
import { listType, infoType, delType } from '@/api/jcpz/gyspz'
export default {
  name: 'Gyspz',
  components: { addEdit },
  data() {
    return {
      //表格高度
      tableHeight:window.innerHeight - 300,
      // 遮罩层
      loading: false,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 创建时间
      dateRange: [],
      // 条件查询
      queryParams: { pageNum: 1, pageSize: 20, mc: null, lx: null },
      // 数据列表
      dataList: [],
      // 供应商类型
      lxOperations: [{label: '供应商', value: '0'}, {label: '销售对象', value: '1'}],
    }
  },
  mounted(){
    this.getList()
  },
  methods: {
    /**
     * 条件查询
     */
    getList(){
      this.loading = true;
      listType(this.addDateRange(this.queryParams, this.dateRange)).then((res) => {
        this.dataList = res.rows;
        this.total = res.total;
        this.loading = false;
      })
    },
    /**
     * 新增
     */
    handleAdd(){
      this.$refs.addEdit.title = '添加供应商信息'
      this.$refs.addEdit.lxOperations = this.lxOperations
      this.$refs.addEdit.visible = true
    },
    /**
     * 修改
     * @param row
     */
    handleUpdate(row){
      const id = row.bbm || this.ids
      infoType(id).then((res) => {
        this.$refs.addEdit.title = '修改供应商信息'
        this.$refs.addEdit.lxOperations = this.lxOperations
        this.$refs.addEdit.form = res.data
        this.$refs.addEdit.visible = true
      })
    },
    /**
     * 删除
     * @param row
     */
    handleDelete(row){
      const ids = row.bbm || this.ids;
      this.$modal.confirm('是否确认删除编号为"' + ids + '"的数据项？').then(function () {
        return delType(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => { });
    },
    /**
     * 导出
     */
    handleExport(){
      this.download('xxx/export', {
        ...this.queryParams
      }, `gyspz_${new Date().getTime()}.xlsx`)
    },
    /**
     * 搜索
     */
    handleQuery(){
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /**
     * 重置
     */
    resetQuery(){
      this.dateRange = [];
      this.queryParams = { pageNum: 1, pageSize: 20, mc: null, lx: null }
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /**
     * 多选框选中数据
     */
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.bbm)
      this.single = selection.length != 1
      this.multiple = !selection.length
    },
  }
}
script>

前端弹框

<template>
  <el-dialog :title="title" :visible.sync="visible" width="40%" :before-close="handleOnClose" :close-on-click-modal="false" :close-on-press-escape="false">
    <el-form ref="form" :model="form" :rules="rules" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="供应商名称" prop="mc">
            <el-input v-model="form.mc" placeholder="供应商名称"/>
          el-form-item>
        el-col>
        <el-col :span="12">
          <el-form-item label="类型" prop="lx">
            <el-select v-model="form.lx" placeholder="供应商类型" style="width: 100%">
              <el-option v-for="item in lxOperations" :key="item.value" :label="item.label" :value="item.value">
              el-option>
            el-select>
          el-form-item>
        el-col>
      el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="联系电话" prop="lxdh">
            <el-input v-model="form.lxdh" placeholder="联系电话"/>
          el-form-item>
        el-col>
        <el-col :span="12">
          <el-form-item label="地址" prop="dz">
            <el-input v-model="form.dz" placeholder="地址"/>
          el-form-item>
        el-col>
      el-row>
    el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitForm">确 定el-button>
      <el-button @click="handleOnClose">取 消el-button>
    div>
  el-dialog>
template>
<script>
import { updateType, addType } from '@/api/jcpz/gyspz'

export default {
  name: 'GyspzDate',
  data(){
    return{
      // 标题
      title: null,
      // 是否显示弹框
      visible: false,
      // 表单参数
      form: {mc: null, lx: null, lxdh: null, dz: null},
      // 正则
      rules: {
        mc: [{ required: true, message: "名称不能为空", trigger: "blur" }],
        lx: [{ required: true, message: "类型不能为空", trigger: "blur" }],
      },
      // 供应商类型
      lxOperations: [],
    }
  },
  methods:{
    /**
     * 提交
     */
    submitForm: function () {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.bbm != undefined) {
            // 修改
            updateType(this.form).then((res) => {
              this.$message.success('success')
              this.handleOnClose()
              this.$emit("success_")
            })
          } else {
            // 新增
            addType(this.form).then((res) => {
              this.$message.success('success')
              this.handleOnClose()
              this.$emit("success_")
            })
          }
        }
      })
    },
    /**
     * 取消
     */
    handleOnClose() {
      this.$refs["form"].resetFields();
      this.form = {mc: null, lx: null, lxdh: null, dz: null};
      this.visible = false
    },
  }
}
script>

JS文件

import request from '@/utils/request'

/**
 * 条件查询
 * @param query
 * @returns {*}
 */
export function listType(query) {
  return request({
    url: '/xxx/xxx/list',
    method: 'get',
    params: query
  })
}

/**
 * 查询详情
 * @param id
 * @returns {*}
 */
export function infoType(id) {
  return request({
    url: '/xxx/xxx/' + id,
    method: 'get'
  })
}

/**
 * 新增
 * @param data
 * @returns {*}
 */
export function addType(data) {
  return request({
    url: '/xxx/xxx',
    method: 'post',
    data: data
  })
}

/**
 * 修改
 * @param data
 * @returns {*}
 */
export function updateType(data) {
  return request({
    url: '/xxx/xxx/',
    method: 'put',
    data: data
  })
}

/**
 * 删除
 * @param ids
 * @returns {*}
 */
export function delType(ids) {
  return request({
    url: '/xxx/xxx/' + ids,
    method: 'delete'
  })
}

/**
 * 根据类型查询供应商信息
 * @param id
 * @returns {*}
 */
export function dictType(lx) {
  return request({
    url: '/xxx/xxx/dict/' + lx,
    method: 'get'
  })
}