web-live/src/views/admin/live/science/base.vue

<template>
  <div id="base">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="leftTop">
          <span>|</span>
          <span>基本信息</span>
        </el-col>
        <el-col :span="24" class="info">
          <el-form ref="form" :model="form" label-width="150px">
            <el-col :span="24">
              <el-form-item prop="name">
                <el-col :span="21" slot="label">
                  房间号
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.room_id" placeholder="请输入房间号" disabled></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="type">
                <el-col :span="21" slot="label">
                  类型
                </el-col>
                <el-col :span="24">
                  <el-select v-model="form.type" placeholder="请选择类型" disabled>
                    <el-option v-for="item in typelist" :key="item.name" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop=" title">
                <el-col :span="21" slot="label">
                  标题
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.title" placeholder="请输入标题"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="orgin">
                <el-col :span="21" slot="label">
                  来源
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.orgin" placeholder="请输入来源"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="create_time">
                <el-col :span="21" slot="label">
                  时间
                </el-col>
                <el-col :span="24">
                  <el-col :span="24">
                    <el-date-picker
                      v-model="form.create_time"
                      placeholder="请选择"
                      value-format="yyyy-MM-dd"
                      format="yyyy-MM-dd"
                      type="date"
                      style="width: 100%;"
                    >
                    </el-date-picker>
                  </el-col>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item prop="desc" class="langInfo">
                <el-col :span="21" slot="label">
                  简介
                </el-col>
                <el-col :span="24">
                  <el-input v-model="form.desc" type="textarea" placeholder="请输入简介"></el-input>
                </el-col>
              </el-form-item>
            </el-col>
            <el-col :span="24" class="btn">
              <el-button type="primary" @click="onSubmit()">提交修改</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
const _ = require('lodash');
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: channel } = createNamespacedHelpers('channel');
const { mapActions: code } = createNamespacedHelpers('code');
export default {
  name: 'sBase',
  props: {},
  components: {},
  data: function() {
    return {
      form: {},
      typelist: [],
    };
  },
  created() {
    this.searchOther();
    this.search();
  },
  methods: {
    ...code({ codeQuery: 'query' }),
    ...channel(['fetch', 'update']),
    async search() {
      const res = await this.fetch(this.user._id);
      if (this.$checkRes(res)) {
        this.$set(this, `form`, res.data);
      }
    },
    async searchOther(val) {
      let res = await this.codeQuery({ category: '04' });
      if (this.$checkRes(res)) {
        this.$set(this, `typelist`, res.data);
      }
    },
    async onSubmit() {
      const res = await this.update(_.cloneDeep(this.form));
      this.$checkRes(res, '修改成功', res.errmsg || '修改失败');
    },
  },
  computed: {
    ...mapState(['user', 'menuParams']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.leftTop {
  font-size: 18px;
  width: 96%;
  height: 41px;
  line-height: 35px;
  border-bottom: 1px solid #e5e5e5;
  position: relative;
  bottom: 1px;
  margin: 10px;
  font-weight: 600;
  color: #22529a;
}
.info {
  margin: 0 40px 15px 10px;
  border: 1px dashed #ccc;
  width: 96%;
  padding: 10px;
  .btn {
    text-align: center;
    margin: 10px 0;
  }
}
/deep/.el-form-item {
  margin-bottom: 0px;
}
/deep/.el-form-item__label {
  border: 1px solid #dcdfe6;
}
/deep/.el-radio-group {
  border: 1px solid #ccc;
  padding: 12px 20px;
  // width: 943px;
}
/deep/.el-input__inner {
  border-radius: 0;
  height: 42px;
  line-height: 42px;
}
/deep/.el-textarea__inner {
  border-radius: 0;
  height: 140px !important;
}
/deep/.langInfo .el-form-item__label {
  padding: 49px 0;
}
/deep/.langInfo .workexperience .textarea__inner {
  height: 140px !important;
}
</style>