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

<template>
  <div id="contextfabu">
    <el-row>
      <el-col :span="24" class="contextfabu">
        <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
          <el-tab-pane label="需求发布" name="first">
            <el-row class="demandForm">
              <el-form ref="form" :model="demandForm" label-width="80px">
                <el-form-item label="产品类型">
                  <el-select v-model="demandForm.totaltype" placeholder="请选择产品类型" @change="selectType">
                    <el-option v-for="(item, index) in totaltype_list" :key="index" :value="item.value" :label="item.name"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="产品名称">
                  <el-input v-model="demandForm.name" placeholder="请输入产品名称"></el-input>
                </el-form-item>
                <el-form-item label="类型">
                  <el-select v-model="demandForm.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>
                <span v-if="totaltype == 0">
                  <el-form-item label="研发阶段">
                    <el-select v-model="demandForm.phase" placeholder="请选择研发阶段">
                      <el-option label="阶段成果" value="1"></el-option>
                      <el-option label="最终成果" value="2"></el-option>
                    </el-select>
                  </el-form-item>
                </span>
                <el-form-item label="产品简介">
                  <el-input v-model="demandForm.introduction" placeholder="请输入产品简介"></el-input>
                </el-form-item>
                <el-row>
                  <el-col :span="12">
                    <el-form-item label="产品单价">
                      <el-input v-model="demandForm.price" placeholder="请输入产品单价"></el-input>
                    </el-form-item>
                  </el-col>
                  <el-col :span="12">
                    <el-form-item label="产品单位">
                      <el-select v-model="demandForm.priceunit" placeholder="请选择产品单位">
                        <el-option v-for="(item, index) in priceunit_list" :key="index" :label="item.name" :value="item.name"></el-option>
                      </el-select>
                    </el-form-item>
                  </el-col>
                </el-row>
                <el-form-item label="产品图片">
                  <!-- <upload :limit="1" :data="acc.url" type="url" :url="'/files/image/upload'" @upload="uploadSuccess"></upload> -->
                  <upload
                    :limit="6"
                    :data="demandForm.image"
                    :uploadBtn="true"
                    type="image"
                    :url="`/files/image/upload`"
                    @upload="uploadSuccess"
                    @delete="uploadDelete"
                  ></upload>
                </el-form-item>
                <span v-if="totaltype == 0 || totaltype == 1">
                  <el-form-item label="产品参数">
                    <template>
                      <el-col :span="12">
                        <el-table :data="product_args" ref="table" tooltip-effect="dark" border stripe @selection-change="selectRow">
                          <el-table-column label="参数名称">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.arg_name"></el-input>
                            </template>
                          </el-table-column>
                          <el-table-column label="参数内容">
                            <template slot-scope="scope">
                              <el-input v-model="scope.row.memo"></el-input>
                            </template>
                          </el-table-column>
                        </el-table>
                      </el-col>
                      <el-col :span="12">
                        <el-button type="primary" @click.prevent="addRow()">添加参数</el-button>
                      </el-col>
                    </template>
                  </el-form-item>
                </span>
                <span v-if="totaltype == 0 || totaltype == 2">
                  <el-form-item label="应用领域">
                    <el-input v-model="demandForm.field" placeholder="请输入应用领域"></el-input>
                  </el-form-item>
                </span>
                <span v-if="totaltype == 0">
                  <el-form-item label="市场前景">
                    <el-input type="textarea" v-model="demandForm.prospect" placeholder="请输入市场前景"></el-input>
                  </el-form-item>
                </span>
                <el-form-item label="电子合同">
                  <el-input v-model="demandForm.contract" placeholder="请输入电子合同"></el-input>
                </el-form-item>
                <el-form-item label="供给类型">
                  <el-select v-model="demandForm.gxtype" placeholder="请选择供给类型">
                    <el-option label="需" value="0"></el-option>
                    <el-option label="供" value="1"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="服务范围">
                  <el-input type="textarea" v-model="demandForm.scope" placeholder="请输入产品名称"></el-input>
                </el-form-item>
                <el-form-item label="知识产权">
                  <el-input v-model="demandForm.property" placeholder="请输入知识产权"></el-input>
                </el-form-item>
                <el-form-item label="交易方式">
                  <el-select v-model="demandForm.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-form-item label="联系人">
                  <el-input v-model="demandForm.contact_user" placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系电话">
                  <el-input v-model="demandForm.contact_tel" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="产品描述">
                  <el-input type="textarea" v-model="demandForm.description" placeholder="请输入产品描述"></el-input>
                </el-form-item>
                <el-form-item label="状态">
                  <el-select v-model="demandForm.status" placeholder="请选择产品状态">
                    <el-option label="草稿" value="0"></el-option>
                    <el-option label="发布" value="1" :disabled="true"></el-option>
                    <el-option label="删除" value="2" :disabled="true"></el-option>
                  </el-select>
                </el-form-item>
                <el-row class="demandBtn">
                  <el-button type="primary" @click="demandBtn()">产品发布</el-button>
                </el-row>
              </el-form>
            </el-row>
          </el-tab-pane>
          <!-- <el-tab-pane label="供给发布" name="second">供给发布</el-tab-pane> -->
        </el-tabs>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import _ from 'lodash';
import upload from '@/components/upload.vue';
export default {
  name: 'contextfabu',
  props: {
    demandForm: null,
    columnList: null,
    totaltype: null,
  },
  components: {
    upload,
  },
  data: () => ({
    activeName: 'first',
    priceunit_list: [
      {
        name: '公斤',
      },
      {
        name: '套',
      },
      {
        name: '件',
      },
    ],
    product_args: [],
    selectlistRow: [],
    rowNum: 1,
    totaltype_list: [
      { name: '技术', value: '0' },
      { name: '产品', value: '1' },
      { name: '服务', value: '2' },
    ],
  }),
  created() {},
  computed: {},
  methods: {
    handleClick(tab, event) {
      console.log(tab, event);
    },
    demandBtn() {
      this.$emit('demandSubmit', { data: this.demandForm, id: this.demandForm.id });
    },
    selectChild(product_type_id) {
      let res = this.columnList.filter(fil => fil.id === product_type_id);
      if (res.length > 0) {
        console.log(res[0].name);
        this.$set(this.demandForm, `product_type_name`, res[0].name);
      }
      this.$forceUpdate();
    },
    uploadSuccess({ type, data }) {
      let arr = _.get(this.demandForm, type);
      if (_.isArray(arr)) {
        let datas = { name: data.name, url: data.uri };
        this.demandForm[type].push({ name: data.name, url: data.uri });
      } else {
        let newArr = [{ name: data.name, url: data.uri }];
        this.$set(this.demandForm, `${type}`, newArr);
      }
    },

    // 获取表格选中时的数据
    selectRow(val) {
      this.selectlistRow = val;
    },
    addRow() {
      var list = {
        rowNum: this.rowNum,
      };
      // let tableData = this.emandForm.product_args;
      this.product_args.unshift(list);
      this.rowNum += 1;
    },

    uploadDelete(index) {
      console.log(index);

      this.demandForm.image.splice(index, 1);
    },
    selectType(item) {
      this.$emit('changeType', item);
      // this.$set(this, `totaltype`, item);
      console.log(item);
    },
  },
};
</script>

<style lang="less" scoped>
/deep/.el-tabs--card > .el-tabs__header {
  border-bottom: 1px solid #215299;
}
/deep/.el-tabs__item {
  height: 50px;
  line-height: 50px;
  font-size: 16px;
}
/deep/.el-tabs__item.is-active {
  color: #ffff;
  background: #215299;
}
.demandForm {
  padding: 0 20px;
}
.demandBtn {
  text-align: center;
}
/deep/.demandBtn .el-button {
  background-color: #ff7814;
  border: none;
}
/deep/.el-table td {
  padding: 0;
}
/deep/.el-table th {
  padding: 0;
  background-color: #f3f3f3;
}
</style>