web-test/src/views/kjpdCenter/basicInfo/index.vue

<template>
  <div id="index">
    <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="请选择类型">
                    <el-option v-for="item in options" :key="item.name" :label="item.name" :value="item.name"> </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(form)">提交修改</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: markettype } = createNamespacedHelpers('markettype');

export default {
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      form: {},
      options: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...markettype(['fetch', 'update', 'query']),
    async search() {
      const res1 = await this.query({ category: '04' });
      if (this.$checkRes(res1)) {
        this.$set(this, `options`, res1.data);
      }
      this.form = this.user;
      const res = await this.fetch(this.user.type);
      this.$set(this.form, `type`, res.data.name);
    },
    //提交修改
    onSubmit(form) {
      if (form) {
        this.$message({
          message: '修改成功',
          type: 'success',
        });
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  watch: {},
};
</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>