guoshilong
2023-03-22 10bc47a275dfd896ba4e72f073d9f901c5390597
src/views/modules/modules.vue
@@ -1,6 +1,6 @@
<template>
  <basic-container>
    <div v-if="!isFunction" class="avue-crud">
    <div v-if="!isFunction && !isView" class="avue-crud">
      <!--按钮-->
      <el-row>
        <div class="avue-crud__menu">
@@ -22,12 +22,12 @@
        <!--卡片显示-->
        <el-col :span="4" v-for="(o, index) in data" :key="o" :offset="index > 0 ? 1 : 0">
          <el-card :body-style="{ padding: '0px' }">
            <img @click="setContent(o.id)" :src="o.background.length>0?o.background[0].value: '/img/bg/img-logo.png' "
            <img @click="setContent(o)" :src="o.background.length>0?o.background[0].value: '/img/bg/img-logo.png' "
                 class="image">
            <div style="padding: 14px;">
              <span>{{ o.name }}</span>
              <div class="bottom clearfix">
                <el-button type="text" class="button">预览</el-button>
                <el-button type="text" class="button" @click="handleView(o)">预览</el-button>
                <el-button type="text" class="button" @click="handleDelete(o.id)">删除</el-button>
                <el-button type="text" class="button" @click="handleEdit(o)">编辑</el-button>
              </div>
@@ -57,18 +57,49 @@
    </div>
    <!-- 功能详情-->
    <Function ref="func" v-if="isFunction" :modulesId="modulesId" @backModules="backModules"></Function>
    <Function ref="func" v-if="isFunction" :modules="modules" @backModules="backModules"></Function>
    <!--功能预览-->
    <ModulesView v-if="isView" ref="modulesView" :modules="modules" @backModules="backModules"></ModulesView>
  </basic-container>
</template>
<script>
import {getList, getDetail, add, update, remove} from "@/api/modules/modules";
import {getList, getDetail, add, update, remove,getAll} from "@/api/modules/modules";
import {mapGetters} from "vuex";
import Function from "@/views/modules/function";
import ModulesView from "@/views/modules/modulesView";
export default {
  components: {Function},
  components: {ModulesView, Function},
  data() {
    var validateName = (rule, value, callback) => {
      if (value) {
        let params = {
          name:value
        }
        getAll(params).then(res => {
          let data = res.data.data
          if (this.form.id) {
            if (data[0].id== this.form.id) {
              callback();
            } else if (data.length > 0) {
              callback(new Error('该模块已存在'));
            } else {
              callback();
            }
          } else {
            if (data.length > 0) {
              callback(new Error('该模块已存在'));
            } else {
              callback();
            }
          }
        })
      } else {
        callback(new Error('请输入模块名'));
      }
    };
    return {
      // 弹框标题
      title: '',
@@ -112,8 +143,8 @@
            span: 24,
            rules: [{
              required: true,
              message: "请输入模块名称",
              trigger: "blur"
              trigger: "blur",
              validator: validateName
            }],
          },
          {
@@ -156,7 +187,8 @@
      // 表单列表
      data: [],
      isFunction: false,
      modulesId: "",
      isView:false,
      modules: "",
    }
  },
  mounted() {
@@ -227,14 +259,7 @@
        this.fileList = this.form.background
      });
    },
    handleView(row) {
      this.title = '查看'
      this.view = true;
      this.box = true;
      getDetail(row.id).then(res => {
        this.form = res.data.data;
      });
    },
    handleDelete(id) {
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
@@ -302,14 +327,19 @@
      });
    },
    //显示功能页
    setContent(id) {
      this.modulesId = id
    setContent(data) {
      this.modules = data
      this.isFunction = !this.isFunction
    },
    //返回模块页
    backModules() {
      this.isFunction = !this.isFunction
    }
      this.isFunction = false
      this.isView = false
    },
    handleView(data) {
      this.modules = data
      this.isView = !this.isView
    },
  }
};
</script>