web-website/src/layout/enterprise/contextfabu.vue

<template>
  <el-col>
    <el-col :span="24" class="rightTop">
      <template>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="需求发布" name="first">
            <el-form ref="form" :model="form" label-width="80px">
              <el-form-item label="类别">
                <el-select v-model="form.totaltype" placeholder="请选择类别" @change="selectType" prop="totaltype">
                  <el-option v-for="(item, index) in typeList" :key="index" :value="item.value" :label="item.name"></el-option>
                </el-select>
              </el-form-item>
              <el-col class="mingcheng" :span="24">
                <el-form-item label="名称">
                  <el-input v-model="form.name" placeholder="请输入名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="mingcheng" :span="24">
                <el-form-item label="类型">
                  <el-select v-model="form.product_type_id" filterable @change="selectChild">
                    <el-option v-for="(item, index) in columnList" :key="index" :value="item.id" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <!-- <el-col class="mingcheng" :span="24">
                <el-form-item label="产品图片" v-model="form.url">
                  <el-upload> </el-upload>
                </el-form-item>
              </el-col> -->
              <el-col class="mingcheng" :span="24">
                <el-form-item label="应用领域" prop="1" v-if="form.totaltype === '1' ? form.totaltype === '2' : 'qiya'">
                  <el-input v-model="form.field" placeholder="请选择名称"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="mingcheng" :span="24">
                <el-form-item label="服务范围" prop="2" v-if="form.totaltype === '0' ? form.totaltype === '1' : 'qiya'">
                  <el-input type="textarea" v-model="form.scope"></el-input>
                </el-form-item>
              </el-col>

              <el-col class="mingcheng" :span="24">
                <el-form-item label="产品参数" prop="2" v-if="form.totaltype === '1' ? form.totaltype === '2' : 'qiya'">
                  <!-- <el-table :data="tableData" style="width: 100%">
                    <el-table-column prop="arg_name" label="参数名称" width="180"> </el-table-column>
                    <el-table-column prop="memo" label="参数内容" width="180"> </el-table-column>
                  </el-table> -->
                  <!-- <el-button type="primary">添加</el-button> -->
                  <template>
                    <div class="tableDate">
                      <div class="button" style="width:6%;float:right;">
                        <P><el-button class="el-icon-plus" @click.prevent="addRow()"></el-button></P>
                        <p><el-button class="el-icon-minus" @click.prevent="delData()"></el-button></p>
                      </div>
                      <div class="table">
                        <el-table :data="tableData" ref="table" tooltip-effect="dark" border stripe style="width: 93%" @selection-change="selectRow">
                          <el-table-column type="selection" width="45" align="center"></el-table-column>
                          <el-table-column label="序号" type="index" width="60" align="center"></el-table-column>

                          <el-table-column label="产品参数">
                            <template slot-scope="scope">
                              <el-input class="arg_name" v-model="scope.row.require_des"></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column label="内容">
                            <template slot-scope="scope">
                              <el-input type="textarea" class="remark" v-model="scope.row.memo"></el-input>
                            </template>
                          </el-table-column>
                        </el-table>
                      </div>
                    </div>
                  </template>
                </el-form-item>
                <el-col class="mingcheng" :span="24">
                  <el-form-item label="市场前景" prop="2" v-if="form.totaltype === '2'">
                    <el-input type="textarea" v-model="form.prospect"></el-input>
                  </el-form-item>
                </el-col>
              </el-col>

              <el-col class="danjia" :span="24">
                <el-form-item label="单价">
                  <el-input v-model="form.userid" placeholder="请输入单价"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="mingcheng" :span="24">
                <el-form-item label="单位">
                  <el-input v-model="form.product_type_name" placeholder="请输入名称"></el-input>
                </el-form-item>
              </el-col>

              <el-col class="mingcheng" :span="24">
                <el-form-item label="交易方式">
                  <el-select v-model="form.business" placeholder="请选择交易方式">
                    <el-option label="公用" value="0"></el-option>
                    <el-option label="转让" value="1"></el-option>
                    <el-option label="竞价" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col class="mingcheng" :span="24">
                <el-form-item label="研发阶段">
                  <el-select v-model="form.phase" placeholder="请选择研发阶段">
                    <el-option label="阶段成果" value="1"></el-option>
                    <el-option label="最终成果" value="2"></el-option>
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col class="mingcheng" :span="24">
                <el-form-item label="简介">
                  <el-input type="textarea" v-model="form.introduction"></el-input>
                </el-form-item>
              </el-col>
              <el-col class="mingcheng" :span="24">
                <el-form-item>
                  <el-button type="primary" @click="onSubmit" size="mini">{{ isNew ? '创建' : '发布' }}</el-button>
                </el-form-item>
              </el-col>
            </el-form>
          </el-tab-pane>
          <el-tab-pane label="供给发布" name="second">配置管理</el-tab-pane>
        </el-tabs>
      </template>
    </el-col>
  </el-col>
</template>

<script>
export default {
  name: 'contextfabu',
  props: {
    isNew: { type: Boolean, default: false } /* 是否新创建 */,
    form: null,
    columnList: null,
  },

  components: {},
  data: () => ({
    tableData: [],
    selectlistRow: [],
    rowNum: 1,
    typeList: [
      { name: '服务', value: '0' },
      { name: '产品', value: '1' },
      { name: '技术', value: '2' },
    ],

    activeName: 'first',
  }),
  created() {
    if (!this.isNew) this.selectType(this.form.totaltype, 'into');
  },
  computed: {},
  methods: {
    selectChild(column_id) {
      let res = this.columnList.filter(fil => fil.id === column_id);
      if (res.length > 0) {
        console.log(res[0].name);
        this.$set(this.form, `product_type_name`, res[0].name);
      }
      this.$forceUpdate();
    },
    async selectType(item, totaltype) {
      if (totaltype !== 'into') {
        delete this.form.url;
        delete this.form.content_id;
      }
      let result;
      if (item === '2') {
        // result = await this.allSearch({ totaltype: 'content', site: this.form.site });
        // if (`${result.errcode}` === '0') this.$set(this, `typeList`, result.data);
      } else if (item === '1') {
        // result = await this.allSearch({ totaltype: 'url', site: this.form.site });
        // if (`${result.errcode}` === '0') this.$set(this, `typeList`, result.data);
      } else if (item === '0') {
        // result = await this.allSearch({ totaltype: 'column', site: this.form.site });
        // if (`${result.errcode}` === '0') this.$set(this, `typeList`, result.data);
      }
    },

    onSubmit() {
      this.$emit('onsaves', { data: this.form });
    },
    handleClick(tab, event) {
      console.log(tab, event);
    },

    // 获取表格选中时的数据
    selectRow(val) {
      this.selectlistRow = val;
    },
    // 增加行
    addRow() {
      var list = {
        rowNum: this.rowNum,
      };
      this.tableData.unshift(list);
      this.rowNum += 1;
    },
    // 删除方法
    // 删除选中行
    delData() {
      for (let i = 0; i < this.selectlistRow.length; i++) {
        let val = this.selectlistRow;
        // 获取选中行的索引的方法
        // 遍历表格中tableData数据和选中的val数据，比较它们的rowNum,相等则输出选中行的索引
        // rowNum的作用主要是为了让每一行有一个唯一的数据，方便比较，可以根据个人的开发需求从后台传入特定的数据
        val.forEach((val, index) => {
          this.tableData.forEach((v, i) => {
            if (val.rowNum === v.rowNum) {
              // i 为选中的索引
              this.tableData.splice(i, 1);
            }
          });
        });
      }
      // 删除完数据之后清除勾选框
      this.$refs.table.clearSelection();
    },
  },
};
</script>

<style lang="less" scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.rightTop {
  height: 60px;
  width: 950px;
}

.rightTopL {
  width: 130px;
  height: 60px;
  background: #215299;
  float: left;
  color: #fff;
  font-size: 18px;
  text-align: center;
  font-family: '微软雅黑', Tahoma, Arial, Helvetica, STHeiti;
}

/deep/.el-tabs__item.is-active {
  color: #ffffff;
  background-color: blue;
}

.el-tabs__active-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background-color: blue;
  z-index: 1;
}
.mingcheng {
  width: 700px;
}
.tables {
  width: 500px;
  padding: 0 0 0 30px;
  min-height: 50px;
}
.jiaoyi {
  width: 400px;
}
.danjia {
  width: 500px;
}
</style>