web-live/src/views/twoweb/service/order/index.vue

<template>
  <div id="index">
    <el-row>
      <el-col :span="24" class="main">
        <div class="w_1200">
          <el-col :span="24" class="one">
            <el-col :span="24" class="btn">
              <!-- <el-button type="primary" size="mini" @click="back">返回</el-button> -->
            </el-col>
            <el-col :span="24" class="text">预约服务</el-col>
            <el-col :span="24" class="dwon">
              <el-form :model="form" :rules="rules" ref="form" label-width="80px">
                <el-form-item label="服务类型" prop="type">
                  <el-radio-group v-model="form.type">
                    <el-radio label="0">服务</el-radio>
                    <el-radio label="1">设备</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="选取机构" prop="medium_id">
                  <el-select v-model="form.medium_id" clearable filterable placeholder="请选择" @change="changeMed">
                    <el-option v-for="item in mediumList" :key="item.id" :label="item.name" :value="item.id"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="服务名称" prop="project" v-if="form.type == '0'">
                  <el-select v-model="form.project" clearable filterable placeholder="请选择">
                    <el-option v-for="item in projectList" :key="item.id" :label="item.name" :value="item"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="设备名称" prop="project" v-if="form.type == '1'">
                  <el-select v-model="form.project" clearable filterable placeholder="请选择">
                    <el-option v-for="item in equipmentList" :key="item.id" :label="item.name" :value="item"> </el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="联系人" prop="contact">
                  <el-input v-model="form.contact" placeholder="请输入联系人"></el-input>
                </el-form-item>
                <el-form-item label="联系电话" prop="phone">
                  <el-input v-model="form.phone" placeholder="请输入联系电话"></el-input>
                </el-form-item>
                <el-form-item label="邮件" prop="email">
                  <el-input v-model="form.email" placeholder="请输入邮件"></el-input>
                </el-form-item>
                <el-form-item label="服务时间" prop="server_time">
                  <el-date-picker v-model="form.server_time" placeholder="请选择" value-format="yyyy-MM-dd" format="yyyy-MM-dd" type="date"> </el-date-picker>
                </el-form-item>
                <el-form-item label="预约备注" prop="remark">
                  <el-input
                    v-model="form.remark"
                    type="textarea"
                    maxlength="200"
                    :autosize="{ minRows: 4, maxRows: 6 }"
                    show-word-limit
                    placeholder="请输入预约备注"
                  ></el-input>
                </el-form-item>
                <el-form-item label="开具发票" prop="invoice">
                  <el-radio-group v-model="form.invoice">
                    <el-radio label="0">否</el-radio>
                    <el-radio label="1">是</el-radio>
                  </el-radio-group>
                </el-form-item>
                <el-form-item label="单位名称" prop="company" v-if="form.invoice == '1'">
                  <el-input v-model="form.company" placeholder="请输入单位名称"></el-input>
                </el-form-item>
                <el-form-item label="税号" prop="number" v-if="form.invoice == '1'">
                  <el-input v-model="form.number" placeholder="请输入纳税人识别号"></el-input>
                </el-form-item>
                <el-col :span="24" class="formBtn">
                  <el-button type="danger" size="mini" @click="back">取消预约</el-button>
                  <el-button type="primary" size="mini" @click="onSubmit('form')">提交预约</el-button>
                </el-col>
              </el-form>
            </el-col>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: Medium } = createNamespacedHelpers('Medium');
const { mapActions: Order } = createNamespacedHelpers('Order');
export default {
  name: 'index',
  props: {},
  components: {},
  data: function() {
    return {
      form: {
        type: '0',
      },
      rules: {
        medium_id: [{ required: true, message: '请选取机构', trigger: 'change' }],
        type: [{ required: true, message: '请选取服务类型', trigger: 'change' }],
        project: [{ required: true, message: '请选取服务', trigger: 'change' }],
        contact: [{ required: true, message: '请输入联系人', trigger: 'blur' }],
        phone: [{ required: true, message: '请输入联系电话', trigger: 'blur' }],
        email: [{ required: true, message: '请输入邮件', trigger: 'blur' }],
        server_time: [{ required: true, message: '请输入服务时间', trigger: 'blur' }],
        remark: [{ required: true, message: '请输入预约备注', trigger: 'blur' }],
      },
      // 机构
      mediumList: [],
      // 服务
      projectList: [],
      // 设备
      equipmentList: [],
    };
  },
  created() {
    this.search();
  },
  methods: {
    ...Medium(['query']),
    ...Order(['create']),
    async search() {
      let res = await this.query();
      if (this.$checkRes(res)) {
        this.$set(this, `mediumList`, res.data);
      }
    },
    // 选择机构
    changeMed(id) {
      let data = this.mediumList.find(i => i.id == id);
      if (data) {
        this.$set(this, `projectList`, data.project);
        this.$set(this, `equipmentList`, data.equipment);
      }
    },
    onSubmit(formName) {
      this.$refs[formName].validate(async valid => {
        if (valid) {
          let data = form;
          data.openid = 'ooHQc5vSXiM5PxfpLSdgGURhbPKI';
          let res = await this.create(data);
          if (this.$checkRes(res, '预约成功', res.errmsg || '预约失败')) {
            this.back();
          }
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    // 取消
    back() {
      this.$router.push({ path: '/twoweb/service/index' });
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  min-height: 500px;
  margin: 10px 0;
  .one {
    min-height: 500px;
    border-radius: 5px;
    border: 1px solid #ccc;
    padding: 0 10px;
    .btn {
      padding: 10px;
      text-align: right;
    }
    .text {
      font-size: 30px;
      text-align: center;
      margin: 0 0 10px 0;
    }
    .dwon {
      padding: 10px;
      border: 1px dashed #ccc;
      border-radius: 5px;
      .formBtn {
        margin-top: 10px;
        text-align: center;
      }
    }
  }
}
.el-date-editor {
  width: 100%;
}
.el-select {
  width: 100%;
}
</style>