web-admin/src/views/platmanag/notice/detail.vue

<template>
  <div id="detail">
    <el-row>
      <el-col :span="24" class="main" v-loading="loadings" element-loading-text="拼命加载中" element-loading-spinner="el-icon-loading">
        <el-col :span="24" style="margin: 0 0 10px 0">
          <el-col :span="2"><el-button type="primary" size="mini" @click="toBack()">返回</el-button></el-col>
        </el-col>
        <el-col :span="24">
          <data-form :fields="infoFields" :rules="rules" v-model="form" labelWidth="150px" @save="toSave">
            <template #customer>
              <el-select
                v-model="form.customer"
                filterable
                multiple
                remote
                placeholder="请选择用户"
                :remote-method="querySearch"
                :loading="loading"
                style="width: 100%"
              >
                <el-option v-for="item in customerList" :key="item._id" :label="item.name" :value="item._id"> </el-option>
              </el-select>
            </template>
            <template #status>
              <el-option v-for="i in statusList" :key="i.label" :label="i.label" :value="i.value"></el-option>
            </template>
          </data-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState, createNamespacedHelpers } from 'vuex';
const { mapActions: users } = createNamespacedHelpers('users');
const { mapActions: dictData } = createNamespacedHelpers('dictData'); // 字典
const { mapActions: notice } = createNamespacedHelpers('notice'); // 消息
export default {
  name: 'detail',
  props: { id: { type: String } },
  components: {},
  data: function () {
    return {
      loadings: true,
      // info部分
      infoFields: [
        { label: '用户', model: 'customer', custom: true },
        { label: '发送时间', model: 'time', type: 'datetime' },
        { label: '内容', model: 'content', type: 'textarea' },
        { label: '状态', model: 'status', type: 'select' },
      ],
      rules: {
        goods: [{ required: true, message: '商品名称', trigger: 'change' }],
        spec: [{ required: true, message: '商品规格', trigger: 'change' }],
        leader_price: [{ required: true, message: '团长价', trigger: 'blur' }],
        price: [{ required: true, message: '团购价', trigger: 'blur' }],
        leader_get: [{ required: true, message: '团长提成金额', trigger: 'blur' }],
        freight: [{ required: true, message: '运费', trigger: 'blur' }],
      },
      form: {},
      // 加载
      loading: false,
      // 远程搜索团长列表
      customerList: [],
      // 规格列表
      statusList: [],
    };
  },
  created() {
    this.searchOthers();
    this.search();
  },
  methods: {
    ...users({ usersQuery: 'query', usersFetch: 'fetch' }),
    ...dictData({ dictQuery: 'query' }),
    ...notice(['query', 'delete', 'fetch', 'update', 'create']),
    // 查询
    async search() {
      if (this.id) {
        const res = await this.fetch(this.id);
        if (this.$checkRes(res)) {
          let list = [];
          list.push(res.data.customer);
          res.data.customer = list;
          this.$set(this, `form`, res.data);
        }
      }
      this.loadings = false;
    },
    // 远程查询
    async querySearch(value) {
      this.loading = true;
      let res = await this.usersQuery({ name: value, is_leader: '0' });
      if (this.$checkRes(res)) this.$set(this, 'customerList', res.data);
      this.loading = false;
    },
    // 保存
    async toSave({ data }) {
      let res;
      if (data._id) res = await this.update(data);
      else res = await this.create(data);
      if (this.$checkRes(res)) {
        this.$message({ type: `success`, message: `维护信息成功` });
        this.toBack();
      }
    },
    // 返回
    toBack() {
      this.$emit('toBack');
    },
    // 查询其他信息
    async searchOthers() {
      let res;
      res = await this.dictQuery({ code: 'notice_status' });
      if (this.$checkRes(res)) this.$set(this, `statusList`, res.data);
      // 团长列表
      res = await this.usersQuery({ is_leader: '0' });
      if (this.$checkRes(res)) {
        // for (const p1 of res.data) {
        //   p1.name = '团长' + '---' + p1.phone + '---' + p1.name;
        // }
        this.$set(this, `customerList`, res.data);
      }
    },
  },
  computed: {
    ...mapState(['user']),
  },
  metaInfo() {
    return { title: this.$route.meta.title };
  },
  watch: {
    test: {
      deep: true,
      immediate: true,
      handler(val) {},
    },
  },
};
</script>

<style lang="less" scoped></style>