flyLong/pc/src/views/ActionGroups.vue

<template>
  <div class="context">
    <div class="panel">
      <h5>动作分组</h5>
      <div class="likeTab">
        <el-button @click="goType('ratingManage')" size="mini" type="primary">动作分组</el-button>
        <el-button @click="goType('actionExercise')" size="mini" type>锻炼动作</el-button>
        <el-button @click="goType('bodyNode')" size="mini" type>身体节点</el-button>
      </div>
      <div class="panel-body">
        <div class="panel_control">
          <el-row :gutter="1">
            <el-col :span="6" align="center">
              <em>分组名称:</em>
              <el-input v-model="panel.str" placeholder="请输入名称" type="text" style="width: 150px"/>
            </el-col>
            <el-col :span="3">
              <em>状态:</em>
              <!--status-->
              <el-select v-model="panel.status" placeholder="请选择">
                <el-option
                    v-for="item in panel.statusOptions"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value">
                </el-option>
              </el-select>
            </el-col>
            <el-col :span="2">
              <el-button size type="primary" @click="query" plain>查询</el-button>
            </el-col>
          </el-row>
        </div>
      </div>
    </div>
    <div class="change">
      <el-button @click="addActionGroup" size="mini" type="primary">新增动作分组</el-button>
      <el-button @click="editActionGroup" size="mini">编辑动作分组</el-button>
      <el-button @click="deleteActionGroup" size="mini" type="danger">删除动作分组</el-button>
    </div>
    <div class="table">
      <el-table :data="tableData" border is-horizontal-resize
                :default-sort="{ prop: 'date', order: 'descending' }" element-loading-background="rgba(0, 0, 0, 0.8)"
                class @selection-change="handleSelectionChange" @current-change="clickChange">
        >
        <el-table-column label="选择" width="55">
          <template slot-scope="scope">
            <el-radio v-model="tableRadio" :label="scope.row">
              <i></i>
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" align="center" width="60"/>
        <el-table-column prop="AgName" label="动作分组名称" align="center" sortable/>
        <el-table-column prop="Memo" label="备注" align="center" sortable/>

        <el-table-column prop="id" label="操作">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="manageActionGroup(scope.row)">管理</el-button>
            <el-popover
                placement="left"
                title="动作分组明细"
                width="450"
                trigger="click"
                content="这是一段内容,这是一段内容,这是一段内容,这是一段内容。">
              <el-table :data="form.groupAcData">
                <el-table-column property="EaName" label="动作名称"></el-table-column>
              </el-table>
              <el-button slot="reference" type="info" size="mini" @click="getAcGroupDetail(scope.row)"
                         style="margin-left: 10px;margin-right: 10px">查看
              </el-button>
            </el-popover>
            <el-button type="success" v-if="scope.row.Status == 8" size="mini" @click="enableRow(scope.row,1)">
              启用
            </el-button>
            <el-button type="warning" v-if="scope.row.Status == 1" size="mini" @click="enableRow(scope.row,8)">
              禁用
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <br/>
      <el-pagination background :total="pagination.total" :page-size="pagination.pageItem"
                     @current-change="pageChange"
                     :current-page.sync="cur_page"
      ></el-pagination>
    </div>

    <el-dialog :title="dialogTitle" :visible.sync="addActionGroupVisible" width="650px">
      <div class="dialogContent">
        <div class>
          <el-form ref="form" :model="form" label-width="160px">
            <el-form-item label="动作名称" :required="true">
              <el-input v-model="form.name"/>
            </el-form-item>
            <el-form-item label="备注">
              <el-input v-model="form.memo"/>
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" v-if="form.btnType == 0" @click="confirmAddActionGroup">确定</el-button>
        <el-button type="primary" size="small" v-if="form.btnType == 1" @click="confirmEditActionGroup">确定</el-button>
        <el-button size="small" @click="addActionGroupVisible = false">取消</el-button>
      </div>
    </el-dialog>

    <el-dialog :title="dialogTitle" :visible.sync="manageActionGroupVisible" width="650px">
      <div class="dialogContent">
        <div class>
          <el-transfer filterable v-model="form.dialogValue" :data="form.dialogData" :titles="['全部动作','已绑动作']">
          </el-transfer>
        </div>
      </div>
      <div class="dialogFooter">
        <el-button type="primary" size="small" @click="confirmManageActionGroup">确定</el-button>
        <el-button size="small" @click="manageActionGroupVisible = false">取消</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Global from '../Global.js'
import {
  ActionGroupStatusEdit,
  ActionGroupEdit,
  ActionGroupQuery,
  ActionGroupAdd,
  ClassListQuery,
  ExerciseActionQuery,
  AGDetailEdit,
  AGDetailQuery
} from "../api/getApiRes";

let qs = require('qs');
export default {
  data() {
    return {
      activeName: 'comm',
      dialogVisible: false,//其他dialog
      addActionGroupVisible: false,//新增动作分组弹窗
      manageActionGroupVisible: false,//管理动作分组弹窗
      dialogTitle: '新增心率设备',
      BtnGetAllPower: false,
      tableRadio: [],
      cur_page: 1,
      // panel 配置项目
      panel: {
        str: '',
        status: "",
        draw: 1,
        start: 0,
        recordsTotal: 0,
        tableData: [],
        allTableData: [],
        loading: false,
        statusOptions: [
          {value: "", label: '全部'},
          {value: 1, label: '启用'},
          {value: 8, label: '禁用'},
        ]
      },
      multipleSelection: [],
      pagination: {
        pageItem: 10,
        pageOptions: pageOptions(),
        total: 100,
        pageIndex: 1,
      },
      form: {
        agId: '',
        agName: '',
        name: '',
        memo: '',
        btnType: 0,//0新建，1编辑编辑
        groupAcData: [],
        dialogData: [],//穿梭待选
        dialogValue: [],//穿梭已选
      },
      tableData: []
    }
  },
  mounted() {
    this.getTableQuery();
    this.getAllActions();
  },
  methods: {
    //顶部菜单项切换
    goType(url) {
      this.$router.push({path: '/' + url});
    },
    //tableData中的行点击事件
    clickChange(item) {
      this.tableRadio = item
    },
    //tableData中的行选择事件
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    //动作分组动作管理
    manageActionGroup(row) {
      let that = this;
      that.allDialogClose();
      that.manageActionGroupVisible = true;
      that.dialogTitle = '分组动作管理'
      that.form.agId = row.AgId;
      that.form.agName = row.AgName;
      that.getAcGroupDetail(row);
    },
    // 关闭所有弹窗
    allDialogClose() {
      this.dialogVisible = false;
      this.addActionGroupVisible = false;
      this.manageActionGroupVisible = false;
    },
    //清除弹窗输入项
    clearForm() {
      this.form.name = '';
      this.form.memo = "";
      this.form.agId = '';
    },
    // 新增动作
    addActionGroup() {
      this.clearForm();
      this.addActionGroupVisible = true;
      this.form.btnType = 0;
      this.dialogTitle = '新增动作分组'
    },
    //确认提交新动作
    confirmAddActionGroup() {
      let that = this;
      if (!that.form.name) {
        this.$message.error('错了哦，动作分组名称不能为空');
        return false
      }
      if (that.form.name.length > 20) {
        this.$message.error('动作分组名称过长，请重新编辑');
        return false
      }
      let param = {
        token: localStorage.token,
        shopId: localStorage.shopId,
        agName: that.form.name,
        memo: that.form.memo
      };
      let postdata = qs.stringify(param);
      ActionGroupAdd(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          // 关闭弹窗
          that.addActionGroupVisible = false;
          // 重载列表
          that.getTableQuery();
          that.$message({
            showClose: true,
            message: '动作分组添加成功！',
            type: 'success'
          });
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    //编辑动作分组
    editActionGroup() {
      let that = this;
      this.clearForm();
      if (this.tableRadio.length == 0) {
        this.$message.error("请先选中一条记录");
        return false
      }
      this.dialogVisible = true;
      this.addActionGroupVisible = true
      this.dialogTitle = '编辑动作分组';

      let row = this.tableRadio;
      this.form.shopid = row.ShopId;
      this.form.agId = row.AgId;
      this.form.name = row.AgName;
      this.form.memo = row.Memo;
      this.form.btnType = 1;
    },
    //提交编辑动作分组
    confirmEditActionGroup() {
      let that = this;
      if (!that.form.name) {
        this.$message.error('错了哦，动作分组名称不能为空');
        return false
      }
      if (that.form.name.length > 20) {
        this.$message.error('动作分组名称过长，请重新编辑');
        return false
      }

      let param = {
        token: localStorage.token,
        shopId: localStorage.shopId,
        agId: that.form.agId,
        agName: that.form.name,
        memo: that.form.memo
      };
      let postdata = qs.stringify(param);
      ActionGroupEdit(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          // 关闭弹窗
          that.addActionGroupVisible = false;
          // 重载列表
          that.getTableQuery();
          that.$message({
            showClose: true,
            message: '动作分组编辑信息编辑成功！',
            type: 'success'
          });
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    //删除动作分组
    deleteActionGroup() {
      let that = this;
      let row = this.tableRadio;
      let param = {
        token: localStorage.token,
        shopId: localStorage.ShopId,
        agId: row.AgId,
        agName: row.AgName,
        status: 9 //1：启用，8：禁用，9：删除
      };
      let postdata = qs.stringify(param);

      this.$confirm('此操作将永久删除该动作分组, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        ActionGroupStatusEdit(postdata).then(res => {
          let json = res;
          if (json.Code == 0) {
            // table 重载
            that.getTableQuery();
            that.$message({
              showClose: true,
              message: '删除成功',
              type: 'success'
            });
          } else {
            that.$message.error(json.Memo);
          }
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    //编辑动作组动作
    confirmManageActionGroup() {
      let that = this;
      if (!that.form.dialogValue) {
        this.$message.error('错了哦，请至少选定一个动作');
        return false
      }
      console.log(that.form.dialogValue.toString());
      let param = {
        token: localStorage.token,
        agId: that.form.agId,
        agName: that.form.agName,
        ecList: that.form.dialogValue.toString()
      };
      let postdata = qs.stringify(param);
      AGDetailEdit(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '执行成功！',
            type: 'success'
          });
          that.manageActionGroupVisible = false;
          // table 重载
          that.getTableQuery();
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    //设置行状态
    enableRow(row, status) {
      let that = this;
      let param = {
        token: localStorage.token,
        agId: row.AgId,
        agName: row.AgName,
        status: status,//1：启用 8：暂停 9：删除
      };
      let postdata = qs.stringify(param);
      ActionGroupStatusEdit(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.$message({
            showClose: true,
            message: '执行成功！',
            type: 'success'
          });
          // table 重载
          that.getTableQuery();
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    //查看动作分组详情
    getAcGroupDetail(row) {
      let that = this;
      that.form.groupAcData = [];
      that.form.dialogValue = [];

      let param = {
        token: localStorage.token,
        shopId: localStorage.shopId,
        agId: row.AgId,
      };
      let postdata = qs.stringify(param);
      AGDetailQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          if (json.Rs != '') {
            that.form.groupAcData = json.Rs;
            for (let temp in that.form.groupAcData) {
              console.log(that.form.groupAcData[temp].EaId);
              that.form.dialogValue.push(that.form.groupAcData[temp].EaId)
            }
          } else {
            that.form.groupAcData = [];
          }
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    //获取当前所有动作
    getAllActions() {
      let that = this;
      let param = {
        token: localStorage.token,
        shopId: localStorage.shopId,
        agId: 0,
      };
      let postdata = qs.stringify(param);
      ExerciseActionQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          if (json.Rs != '') {
            that.form.dialogData = turnActionsResToOption(json.Rs);
          } else {
            that.form.dialogData = [];
          }
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    // 查询按钮
    query() {
      let that = this;
      that.start = 0;
      that.cur_page = 1;
      this.getTableQuery();
      this.$message.success('查询完毕');
    },
    // 页面数据查询
    getTableQuery() {
      let that = this;
      that.loading = true;
      let param = {
        token: localStorage.token,
        shopId: localStorage.shopId,
        agName: that.panel.str,
        status: that.panel.status,
      };
      let postdata = qs.stringify(param);
      ActionGroupQuery(postdata).then(res => {
        let json = res;
        if (json.Code == 0) {
          that.loading = false;
          if (json.Rs) {
            that.allTableData = json.Rs;
            that.recordsTotal = json.Rs.length;
          } else {
            that.allTableData = [];
            that.recordsTotal = 0;
          }
          // 设置分页数据
          that.setPaginations();
        } else {
          that.$message.error(json.Memo + ' 错误码：' + json.Code);
        }
      })
    },
    // 设置分页数据
    setPaginations() {
      // 分页属性
      let that = this;
      that.pagination.total = that.recordsTotal;

      // 默认分页
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pagination.pageItem;
      });
    },
    // 每页显示数量
    handleSizeChange() {
      let that = this;
      that.tableData = that.allTableData.filter((item, index) => {
        return index < that.pagination.pageItem;
      });
      that.draw = that.pagination.pageItem;
      // that.getTableQuery();
    },
    // 翻页
    pageChange(pageIndex) {
      let that = this;
      // 获取当前页
      let index = that.pagination.pageItem * (pageIndex - 1);
      // 数据总数
      let nums = that.pagination.pageItem * pageIndex;
      // 容器
      let tables = [];
      for (var i = index; i < nums; i++) {
        if (that.allTableData[i]) {
          tables.push(that.allTableData[i])
        }
        this.tableData = tables;
      }
      that.start = index * that.draw;
      // that.getTableQuery();
    },
    // 自动排序
    sortChange(params) {
      console.log(params)
    },
    //            过滤时间
    filterFmtDate(value, row, column) {
      let that = this;
      if (column == 0) {
        return '未获得'
      } else {
        return nonTfmtDatetoLength(new Date(column * 1000), 16);
      }
    },
  },
}
</script>

<style scoped>
@import "../assets/css/panel.css";

.context {
  /* height: 770px; */
  overflow-y: scroll;

  display: block;
  margin: 0 auto;
  background-color: #fff !important;
  padding: 30px;
}

.panel-body {
  padding: 20px;
  background: #f0f2f5;
}

.change {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 10px;
}

.change button {
  float: left;
}

.change button.pull-right {
  float: right;
}

.likeTab {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  padding-top: 10px;
  padding-bottom: 0;
  border-bottom: 1px solid #ccc;
  margin-bottom: 10px;
}

.likeTab button {
  float: left;
  border-radius: 0;
}

.likeTab button.pull-right {
  float: right;
}

.dialogTitle {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  color: #000000;
  font-size: 18px;
  text-align: center;
}

.dialogTitle em {
  float: none;
  font-style: normal;
  color: #3799ff;
  margin: 0;
}

/deep/ .el-transfer-panel__item .el-checkbox__input {
  left: 40px;
}

.dialogFooter {
  width: 90%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
  margin-top: 10px;
}

.dialogFooter button {
  float: right;
  margin-left: 10px;
}

.dialogContent {
  width: 100%;
  overflow: hidden;
  display: block;
  margin: 0 auto;
}

.dialogContent .pull-left {
  width: 30%;
  float: left;
}

.dialogContent .pull-right {
  width: 70%;
  float: right;
}

.panel_control /deep/ .el-input {
  width: 90px;
  float: left;
}

.panel-body em {
  /*float: left;*/
  line-height: 40px;
  margin-right: 10px;
}

</style>