supply-front/src/views/basic_data/supplier/components/supplier_list-detail.vue

<template>
  <div>
    <div class="sty">
      <el-page-header @back="goBack" content="详情页面"> </el-page-header>
    </div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>供应商编码</span>
      </div>
      <el-row>
        <el-col :span="6"
          ><span class="color">创建组织</span><input type="text"
        /></el-col>
        <el-col :span="6"><span>使用组织</span><input type="text" /></el-col>
        <el-col :span="6"
          ><span class="color">注册编码</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">编码</span><input type="text"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><span>名称</span><input type="text" /></el-col>
        <el-col :span="6"><span>简称</span><input type="text" /></el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>基本信息</span>
      </div>
      <div class="baseInfo">
        <div>
          <div class="base-header">
            <span>地址</span>
          </div>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">国家</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">地区</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">通讯地址</span
              ><textarea
                name=""
                id=""
                cols="30"
                rows="10"
                class="textareaStyle"
              ></textarea>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">邮政编码</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">语言</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">公司地址</span
              ><textarea
                class="textareaStyle"
                name=""
                id=""
                cols="30"
                rows="10"
              ></textarea>
            </el-col>
          </el-row>
        </div>
        <div>
          <div class="base-header">
            <span>注册</span>
          </div>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">行业</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">创立日期</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">法人代表</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">注册资金(万元)</span
              ><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">公司规模工商登记号</span
              ><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">生产经许可证</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">统一社会信用代码</span
              ><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">注册地址</span
              ><textarea
                name=""
                id=""
                cols="30"
                rows="10"
                class="textareaStyle"
              ></textarea>
            </el-col>
          </el-row>
        </div>
        <div>
          <div class="base-header">
            <span>管理</span>
          </div>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">负责部门</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">负责人</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">供应商分类</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">供应类别</span
              ><select name="" id="" class="selectStyle">
                <option value="">采购</option>
              </select></el-col
            >
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">供应商等级</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">供应商分组</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">公司类别</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r color">公司性质</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">公司规模</span><input type="text"
            /></el-col>
          </el-row>
          <el-row>
            <el-col :span="24"
              ><span class="marg-r">对应组织</span><input type="text"
            /></el-col>
          </el-row>
        </div>
      </div>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>商务信息</span>
      </div>
      <el-row>
        <el-col :span="6"
          ><span class="color">采购组</span><input type="text"
        /></el-col>
        <el-col :span="6"><span>默认价目表</span><input type="text" /></el-col>
        <el-col :span="6"
          ><span>业务状态</span
          ><select name="" id="" class="selectStyle2">
            <option value="">正常</option>
          </select></el-col
        >
        <el-col :span="6"><span>默认折扣表</span><input type="text" /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span>冻结范围</span
          ><select name="" id="" class="selectStyle2">
            <option value=""></option></select
        ></el-col>
        <el-col :span="6"
          ><span class="color">供货方</span><input type="text"
        /></el-col>
        <el-col :span="6"><span>冻结人</span><input type="text" /></el-col>
        <el-col :span="6"
          ><span class="color">VMI仓库</span><input type="text"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span>冻结日期</span><input type="date" class="inputDate"
        /></el-col>
        <el-col :span="6"><span>VMI业务</span><input type="checkbox" /></el-col>
        <el-col :span="6"
          ><span class="color">汇总公司</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span>启用供应商协同</span><input type="checkbox"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"><span>保证金比例</span><input type="text" /></el-col>
        <el-col :span="6"
          ><span class="color">默认联系人</span><input type="text"
        /></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </el-card>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>财务信息</span>
      </div>
      <el-row>
        <el-col :span="6"
          ><span class="color">对应客户</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span>单次预付额度</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">发票类型</span
          ><select name="" id="" class="selectStyle2">
            <option value="">正常</option>
          </select></el-col
        >
        <el-col :span="6"
          ><span class="color">结算币别</span><input type="text"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span class="color">税分类</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">默认税率</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">结算方式</span><input type="text"
        /></el-col>
        <el-col :span="6"><span>税务登记号</span><input type="text" /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span>描述</span
          ><textarea
            class="textareaStyle"
            name=""
            id=""
            cols="30"
            rows="10"
            style="width: 46%"
          ></textarea>
        </el-col>
        <el-col :span="6"
          ><span class="color">付款条件</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">经营类型</span><input type="text"
        /></el-col>
        <el-col :span="6"
          ><span class="color">结算方</span><input type="text"
        /></el-col>
      </el-row>
      <el-row>
        <el-col :span="6"
          ><span class="color">收款方</span><input type="text"
        /></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
        <el-col :span="6"></el-col>
      </el-row>
    </el-card>
  </div>
</template>

<script>
export default {
  methods: {
    goBack() {
      console.log(this.$parent);
      this.$parent.isShow = true;
    },
  },
};
</script>

<style lang="scss" scoped>
.baseWidth {
  width: 46%;
}
.inputDate {
  width: 46%;
}
.selectStyle2 {
  width: 46%;
}
.selectStyle {
  width: 35%;
}
.textareaStyle {
  vertical-align: text-top;
  resize: none;
  width: 35%;
  height: 100px;
}
.color {
  color: #1f93ec;
}
.el-col-24 {
  margin: 6px 0;
}

.marg-r {
  padding-right: 15px;
  font-size: 12px;
  display: inline-block;
  width: 120px;
}
.base-header {
  height: 20px;
  width: 60%;
  border-bottom: 2px solid gray;
  span {
    width: 100px;
    height: 100%;
    display: block;
    text-align: center;
    color: #fff;

    background-color: gray;
  }
}
.box-card {
  margin-bottom: 20px;
}
.el-col-6 {
  span {
    padding-right: 10px;
    display: inline-block;
    width: 100px;
  }
}
.baseInfo {
  display: flex;
  justify-content: space-between;
  > div {
    width: 33%;
  }
}
.sty {
  margin-bottom: 20px;
}
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
</style>