web-test/src/views/adminCenter/dockInfo/parts/dockEdit.vue

<template>
  <div id="dockEdit">
    <el-row>
      <el-col :span="24">
        <el-col :span="24" class="back">
          <el-button type="primary" size="mini" @click="back()">返回</el-button>
        </el-col>
        <el-col :span="24" class="form">
          <el-form ref="form" :model="form" label-width="120px">
            <el-form-item label="对接会标题">
              <el-input v-model="form.title"></el-input>
            </el-form-item>
            <el-form-item label="开始时间">
              <el-date-picker v-model="form.start_time" type="datetime" placeholder="请选择开始时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="结束时间">
              <el-date-picker v-model="form.end_time" type="datetime" placeholder="请选择结束时间" format="yyyy-MM-dd HH:mm" value-format="yyyy-MM-dd HH:mm">
              </el-date-picker>
            </el-form-item>
            <el-form-item label="报名截止时间">
              <el-date-picker
                v-model="form.join_end"
                type="datetime"
                placeholder="请选择报名截止时间"
                format="yyyy-MM-dd HH:mm"
                value-format="yyyy-MM-dd HH:mm"
              >
              </el-date-picker>
            </el-form-item>
            <el-form-item label="省份">
              <el-select v-model="form.province" placeholder="请选择省份" @change="changeshenge">
                <el-option v-for="item in option" :key="item.code" :label="item.name" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="市">
              <el-select v-model="form.place" placeholder="请选择市">
                <el-option v-for="item in options" :key="item.code" :label="item.name" :value="item.code"> </el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="简介">
              <el-input type="textarea" v-model="form.desc"></el-input>
            </el-form-item>
            <el-form-item label="负责人">
              <el-input v-model="form.adminuser" placeholder="请输入用户名"></el-input>
            </el-form-item>
            <el-form-item label="负责人手机号">
              <el-input v-model="form.phone" maxlength="11" placeholder="请输入手机号" disabled> </el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.passwd" placeholder="请输入密码" show-password disabled></el-input>
            </el-form-item>
            <el-form-item label="对接会视频">
              <upload :limit="1" :data="form.file_path" type="file_path" listType="" :url="'/files/imgpath/upload'" @upload="uploadSuccess"></upload>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit()">提交</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import upload from '@/components/upload.vue';
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: place } = createNamespacedHelpers('place');
const { mapActions: dock } = createNamespacedHelpers('dock');
const { mapActions: authUser } = createNamespacedHelpers('authUser');
export default {
  name: 'dockEdit',
  props: {
    dockid: null,
  },
  components: {
    upload,
  },
  data: function() {
    return {
      form: {},
      option: [],
      options: [],
    };
  },
  created() {
    this.searcOption();
    this.searchInfo();
  },
  methods: {
    ...place({ palcequery: 'query', transactiondtetle: 'delete' }),
    ...dock(['query', 'delete', 'update', 'fetch']),
    ...authUser({ authUserFetch: 'fetch', authUserUpdate: 'update' }),
    async searchInfo() {
      if (this.dockid) {
        let res = await this.fetch(this.dockid);
        if (this.$checkRes(res)) {
          this.$set(this, `form`, res.data);
        }
      }
    },
    // 提交
    async onSubmit() {
      let res = await this.update(this.form);
      if (this.$checkRes(res)) {
        let data = {};
        data.id = this.user.uid;
        data.name = this.form.adminuser;
        let arr = await this.authUserUpdate(data);
        if (this.$checkRes(arr)) {
          this.$message({
            message: '修改信息成功',
            type: 'success',
          });
          this.back();
        }
      }
    },
    // 返回
    back() {
      this.$emit('back');
    },
    async searcOption() {
      let level = 1;
      let res = await this.palcequery({ level });
      this.$set(this, `option`, res.data);
    },
    async changeshenge(value) {
      let level = 2;
      let parent = value;
      let res = await this.palcequery({ level, parent });
      this.$set(this, `options`, res.data);
    },
    uploadSuccess({ type, data }) {
      console.log(type, data);
      this.$set(this.form, `${type}`, data.uri);
    },
  },
  computed: {
    ...mapState(['user']),
    pageTitle() {
      return `${this.$route.meta.title}`;
    },
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
};
</script>

<style lang="less" scoped>
.back {
  text-align: right;
  margin: 0 0 10px 0;
}
</style>