wms / wms-cloud-ui · Files

<template>
  <div class="app-container">
    <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch">
      <el-form-item label="编码" prop="code">
        <el-input
          v-model="queryParams.code"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="名称" prop="name">
        <el-input
          v-model="queryParams.name"
          clearable
          size="small"
          style="width: 240px"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>

    <el-row style="margin-top: 6px" :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['config:material:add']"
        >新增</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="el-icon-edit"
          size="mini"
          :disabled="single"
          @click="handleUpdate"
          v-hasPermi="['config:supplier:edit']"
        >修改</el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['config:supplier:remove']"
        >删除</el-button>
      </el-col>

      <right-toolbar :show-search.sync="showSearch" @queryTable="getList" :col-data="colData" @selectData="selectData" />

    </el-row>

     <!--添加供应商-->
    <el-dialog :title="title" :visible.sync="open" width="700px">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="编码：" prop="code">
              <el-input v-model="form.code" placeholder="请输入编码" :disabled="form.id == undefined?false:true" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="名称：" prop="name">
              <el-input v-model="form.name" placeholder="请输入名称" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="货主：" prop="companyCode">
              <el-select v-model="form.companyCode" placeholder="请选择" :style="{width: '100%'}">
                <el-option
                  v-for="attr in companyOptions"
                  :key="attr.id"
                  :value="attr.code"
                  :label="attr.name"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="地址：" prop="address1">
              <el-input v-model="form.address1" placeholder="请输入地址" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="地址2：" prop="address2">
              <el-input v-model="form.address2" placeholder="请输入地址2" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="城市：" prop="city">
              <el-input v-model="form.city" placeholder="请输入城市" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="省份：" prop="state">
              <el-input v-model="form.state" placeholder="请输入省份" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="国家：" prop="country">
              <el-input v-model="form.country" placeholder="请输入国家" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="邮编：" prop="postalCode">
              <el-input v-model="form.postalCode" placeholder="请输入邮编" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="联系人：" prop="attentionTo">
              <el-input v-model="form.attentionTo" placeholder="请输入联系人" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="电话：" prop="phoneNum">
              <el-input v-model="form.phoneNum" placeholder="请输入电话" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="传真：" prop="faxNum">
              <el-input v-model="form.faxNum" placeholder="请输入传真" />
            </el-form-item>
          </el-col>
        </el-row>

        <el-row :gutter="20">
          <el-col :span="12">
            <el-form-item label="E-mail：" prop="email">
              <el-input v-model="form.email" placeholder="请输入E-mail" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
              <el-form-item label="是否有效" prop="enable">
                <el-switch v-model="form.enable" active-value="0" inactive-value="1" />
              </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="cancel">取 消</el-button>
      </div>
    </el-dialog>

    <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange" ref="table">
      <el-table-column type="selection" width="55" align="center" />
      <el-table-column label="id" align="center" prop="id" v-if="colData[0].istrue"/>
      <el-table-column label="仓库" align="center" prop="warehouseCode" v-if="colData[1].istrue">
        <template slot-scope="scope">
          {{warehouseCodeFormat(scope.row, scope.column)}}
        </template>
      </el-table-column>
      <el-table-column label="货主" align="center" prop="companyCode" width="200" v-if="colData[2].istrue">
        <template slot-scope="scope">
          {{companyCodeFormat(scope.row, scope.column)}}
        </template>
      </el-table-column>
      <el-table-column label="编码" align="center" prop="code" v-if="colData[3].istrue" :show-overflow-tooltip="true" />
      <el-table-column label="名称" align="center" prop="name" v-if="colData[4].istrue" :show-overflow-tooltip="true" />
      <el-table-column label="地址1" align="center" prop="address1" v-if="colData[5].istrue"/>
      <el-table-column label="地址2" align="center" prop="address2" v-if="colData[6].istrue"/>
      <el-table-column label="城市" align="center" prop="city" v-if="colData[7].istrue" />
      <el-table-column label="省份" align="center" prop="city" v-if="colData[8].istrue" />
      <el-table-column label="国家" align="center" prop="city" v-if="colData[9].istrue" />
      <el-table-column label="邮编" align="center" prop="city" v-if="colData[10].istrue" />
      <el-table-column label="联系人" align="center" prop="attentionTo" v-if="colData[11].istrue" />
      <el-table-column label="电话" align="center" prop="phoneNum" width="125" v-if="colData[12].istrue" />
      <el-table-column label="传真" align="center" prop="faxNum" width="125" v-if="colData[13].istrue" />
      <el-table-column label="E-mail" align="center" prop="email" width="180" v-if="colData[14].istrue" :show-overflow-tooltip="true"/>
      <el-table-column label="创建时间" align="center" prop="created" width="160" v-if="colData[15].istrue">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.created) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建用户" align="center" prop="createdBy" v-if="colData[16].istrue" />
      <el-table-column label="更新时间" align="center" prop="lastUpdated" width="150" v-if="colData[17].istrue">
        <template slot-scope="scope">
          <span>{{ parseTime(scope.row.lastUpdated) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新用户" align="center" prop="lastUpdatedBy" v-if="colData[18].istrue" />
      <el-table-column label="是否有效" align="center" prop="enable" width="80" v-if="colData[19].istrue">
        <template slot-scope="scope">
              <el-button size="mini" :type="scope.row.enable | statusFilter" round>
                {{statusFormat(scope.row, scope.column)}}
              </el-button>
        </template>
      </el-table-column>
      <el-table-column label="自定义字段1" align="center" prop="userDef1" width="100" v-if="colData[20].istrue" />
      <el-table-column label="自定义字段2" align="center" prop="userDef2" width="100" v-if="colData[21].istrue" />
      <el-table-column label="自定义字段3" align="center" prop="userDef3" width="100" v-if="colData[22].istrue" />
      <el-table-column fixed="right" label="操作" align="center" class-name="small-padding fixed-width" min-width="160" v-if="colData[23].istrue">
        <template slot-scope="scope">
            <el-button
              size="mini"
              type="text"
              icon="el-icon-edit"
              @click="handleUpdate(scope.row)"
              v-hasPermi="['config:supplier:edit']"
            >修改</el-button>
            <el-button
              size="mini"
              type="text"
              icon="el-icon-delete"
              @click="handleDelete(scope.row)"
              v-hasPermi="['config:supplier:remove']"
            >删除</el-button>
        </template>
      </el-table-column>
    </el-table>

      <pagination
         v-show="total > 0"
         :total="total"
         :page.sync="queryParams.pageNum"
         :limit.sync="queryParams.pageSize"
         @pagination="getList"/>
  </div>
</template>

<script>
      import { listSuppier, getSuppier, delSuppier, addSuppier, updateSuppier, } from "@/api/config/receipt/supplier";
      import {getCompaniesByToken} from "@/api/system/company";
      import {getWarehouseByUserCode} from "@/api/system/warehouse";
      export default {
        filters: {
          statusFilter(status) {
            const statusMap = {
              0: 'success',
              1: 'danger'
            }
            return statusMap[status];
          },
        },
        name: "Supplier",
        data() {
          return {
            // 遮罩层
            loading: true,
            // 选中数组
            ids: [],
            // 非单个禁用
            single: true,
            // 非多个禁用
            multiple: true,
            // 参数表格数据
            tableData: [],
            // 隐藏表格右上方搜索刷新按钮
            showSearch: true,
            // 总条数
            total: 0,
            // 是否显示弹出层
            open: false,
            // 对话框标题
            title: '',

            // 仓库、货主数据、是否有效字典
            warehouseOptions: [],
            companyOptions: [],
            statusOptions: [],
            // 查询参数
            queryParams: {
              pageNum: 1,
              pageSize: 10,
              code: undefined,
              name: undefined
            },
            // 表单参数
            form: {},
            // 表单校验
            rules: {
              code: [
                { required: true, message: "编码不能为空", trigger: "blur" }
              ],
              name: [
                { required: true, message: "名称不能为空", trigger: "blur" }
              ],
              companyCode: [
                { required: true, message: "货主编码不能为空", trigger: "blur" }
              ],
              postalCode: [
                {pattern: /^\d{6}$/,message: "请输入正确的邮编",trigger: "blur"}
              ],
              phoneNum: [
                {pattern: /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/,message: "请输入正确的座机号码",trigger: "blur"}
              ],
              faxNum: [
                {pattern: /^(0[0-9]{2,3}\-)([2-9][0-9]{6,7})+(\-[0-9]{1,4})?$/,message: "请输入正确的传真号码",trigger: "blur"}
              ],
              email: [
                {type: "email",message: "请输入正确的邮箱地址",trigger: ["blur", "change"]}
              ],
            },

            colData: [
              { title: "id", istrue: false },
              { title: "仓库", istrue: true },
              { title: "货主", istrue: true },
              { title: "编码", istrue: true },
              { title: "名称", istrue: true },
              { title: "地址1", istrue: true },
              { title: "地址2", istrue: false },
              { title: "城市", istrue: true },
              { title: "省份", istrue: false },
              { title: "国家", istrue: false },
              { title: "邮编", istrue: false },
              { title: "联系人", istrue: true },
              { title: "电话", istrue: true },
              { title: "传真", istrue: false },
              { title: "E-mail", istrue: false },
              { title: "创建时间", istrue: true },
              { title: "创建用户", istrue: true },
              { title: "更新时间", istrue: true },
              { title: "更新用户", istrue: true },
              { title: "是否有效", istrue: true },
              { title: "自定义字段1", istrue: false },
              { title: "自定义字段2", istrue: false },
              { title: "自定义字段3", istrue: false },
              { title: "操作", istrue: true, disabled: true },
            ],

      };
    },
    created() {
      this.getList();
      //是否有效
      this.getDicts("enable").then((response) => {
        this.statusOptions = response.data;
      });
      //仓库select下拉接口获取
      getWarehouseByUserCode(this.$store.getters.name).then((response) => {
        this.warehouseOptions =  response.data
      });
      //货主select下拉接口获取
      getCompaniesByToken().then(response => {
        this.companyOptions = response
      });

    },

        beforeUpdate() {
          this.$nextTick(() => {
            this.$refs["table"].doLayout();
          });
        },

    methods: {
      /** 查询参数列表 */
      getList() {
        this.loading = true;
        listSuppier(this.queryParams).then(response => {
            this.tableData = response.rows;
            this.total = response.total;
            this.loading = false;
          }
        );
      },
      // 仓库字典翻译
      warehouseCodeFormat(row, column) {
        return this.selectCommonLabel(this.warehouseOptions, row.warehouseCode);
      },
      // 货主字典翻译
      companyCodeFormat(row, column) {
        return this.selectCommonLabel(this.companyOptions, row.companyCode);
      },
      // 是否有效字典翻译
      statusFormat(row, column) {
        return this.selectDictLabel(this.statusOptions, row.enable);
      },


      // 取消按钮
      cancel() {
        this.open = false;
        this.reset();
      },
      // 表单重置
      reset() {
        this.form = {
          id: undefined,
          code: undefined,
          name: undefined,
          companyCode: undefined,
          address1: undefined,
          address2: undefined,
          city: undefined,
          state: undefined,
          country: undefined,
          postalCode: undefined,
          attentionTo: undefined,
          phoneNum: undefined,
          faxNum: undefined,
          email: undefined,
          enable: "0",
        };
        this.resetForm("form");
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      /** 新增按钮操作 */
      handleAdd() {
        this.reset();
        this.open = true;
        this.title = "添加供应商";
      },
      // 多选框选中数据
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.code = selection.map((item) => item.code);
        this.single = selection.length!=1
        this.multiple = !selection.length
      },
      /** 修改按钮操作 */
      handleUpdate(row) {
        this.reset();
        const typeId = row.id || this.ids;
        getSuppier(typeId).then(response => {
          response.data.enable = response.data.enable.toString();
          delete response.data.created;
          delete response.data.lastUpdated;
          this.form = response.data;
          this.form.enable = response.data.enable.toString();
          this.open = true;
          this.title = "修改供应商";
        });
      },
      /** 提交按钮 */
      submitForm: function() {
        this.form.enable = parseInt(this.form.enable);
        this.$refs["form"].validate(valid => {
          if (valid) {
            if (this.form.id != undefined) {
              updateSuppier(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("修改成功");
                  this.open = false;
                  this.getList();
                }
              });
            } else {
              addSuppier(this.form).then(response => {
                if (response.code === 200) {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              });
            }
          }
        });
      },
      /** 删除按钮操作 */
      handleDelete(row) {
        const supplierIds = row.id || this.ids.toString();
        this.$confirm(
          row.id?'是否确认删除该条供应商信息吗？':'是否确认删除选中的' + this.ids.length + '条数据项？',
          "警告",
          {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }).then(function() {
          return delSuppier(supplierIds);
        }).then(() => {
          this.getList()
          this.msgSuccess("删除成功");
        }).catch(function() {});
      },
      /** 表格切换字段显示操作 */
      selectData(val) {
        if (val) {
          this.colData.filter((i) => {
            if (val.indexOf(i.title) !== -1) {
              i.istrue = true;
            } else {
              i.istrue = false;
            }
          });
        }
      },

    },
  };
</script>


<style lang="scss" scoped>
  .el-button--mini.is-round {
    padding: 5px 10px;
  }
</style>