link-wechat-web-pc/src/views/customerOperations/sop/list.vue

<!-- 模板区域 -->
<template>
  <div>
    <!-- 模板内容 -->
    <el-form ref="queryForm" :inline="true" :model="queryform" label-width="100px" class="top-search">
      <el-form-item label="SOP名称">
        <el-input v-model="queryform.sopName" placeholder="请输入"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="queryform.sopStatus" placeholder="请选择，支持关键词搜索" clearable filterable>
          <el-option label="全部" value=" "></el-option>
          <el-option label="启用" value="1"></el-option>
          <el-option label="停用" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="findPage()">查询</el-button>
        <el-button @click="resetForm()">重置</el-button>
      </el-form-item>
    </el-form>
    <div class="g-card  ">
      <div class="mid-action">
        <el-button class="ml10" type="primary" @click="sopAdd">
          新建
        </el-button>
      </div>
      <templateTable ref="commonTable" :operationWidth="200" :SerialShow="false" :showOperation="true"
        :showBatchDelete="false" :data="Result" :columns="Columns" @findPage="findPage">
        <template slot="buttonSlot" slot-scope="{ row }">
          <el-button type="text" @click="sopEdit(row)">编辑</el-button>
          <el-button type="text" @click="viewCopy(row)">复制</el-button>
          <el-button type="text" @click="viewDel(row)">删除</el-button>
          <el-button type="text" @click="viewEditStatus(row)">{{ row.sopStatus == 2 ? '启用' : '停用' }}</el-button>
        </template>
      </templateTable>
    </div>
    <el-dialog :title='dialogtitle' :visible.sync="sopAddShow" width="30%">
      <div>
        <el-form ref="form" :rules="rules" :model="form" label-width="120px">
          <el-form-item label="SOP名称" prop="sopName">
            <el-input v-model="form.sopName" placeholder="请输入SOP名称"></el-input>
          </el-form-item>
          <el-form-item label="场景描述" prop="sopDesc">
            <el-input type="textarea" v-model="form.sopDesc" maxlength="200" show-word-limit
              placeholder="请输入关键词"></el-input>
          </el-form-item>
          <el-form-item label="触发类型" prop="executeType">
            <el-select v-model="form.executeType" placeholder="请选择" clearable filterable @change="executeTypeChange">
              <el-option label="行为触发" :value="2"></el-option>
              <el-option label="时间触发" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="行为类型编码" :prop="form.executeType == '2' ? 'behaviorId' : ''">
            <el-select v-model="form.behaviorId" placeholder="请选择" clearable filterable>
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in behaviorTypeList"
                :key="index.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="时间类型" prop="timeType" class=" ">
            <el-radio-group v-model="form.timeType">
              <el-radio :label="1">相对时间</el-radio>
              <el-radio :label="2">绝对时间</el-radio>
            </el-radio-group>
            <i @click="addDomain" class="el-icon-circle-plus"
              style="color: #07c160;font-size: 20px;margin-left: 20px"></i>
          </el-form-item>
          <el-form-item label="时间间隔" prop="relativeTime" v-if="form.timeType == 1">
            <el-time-select v-model="relativeTime" :picker-options="{
              start: '00:00',
              step: '00:15',
            }" placeholder="选择时间">
            </el-time-select>
          </el-form-item>
          <el-form-item v-if="form.timeType == 2" v-for="domain in form.domains" :label="'选择日期'" :key="domain.key"
            prop="absoluteTime">
            <div class="flex a-c ">
              <el-date-picker v-model="domain.absoluteTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
                style="width: 70%;">
              </el-date-picker>
              <el-button @click.prevent="removeDomain(domain)" style="margin-left: 20px;">删除</el-button>
            </div>
          </el-form-item>
          <el-form-item label="关联标签" prop="tagGroupId">
            <el-select v-model="form.tagGroupId" placeholder="请选择" clearable filterable @change="tagsArrayChange">
              <el-option v-for="(item, index) in tagsArray" :key="index" :label="item.groupName"
                :value="item.id"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联标签" prop="tagId" v-if="form.tagGroupId">
            <el-select v-model="form.tagIdlist" placeholder="请选择" clearable multiple>
              <el-option :label="item.name" :value="item.id" v-for="(item, index) in tagsSubSet"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="关联素材" prop="materialId">
            <el-select v-model="form.materialId" placeholder="请选择素材" clearable filterable>
              <el-option :label="item.materialName" :value="item.id" v-for="(item, index) in aterialList"
                :key="index"></el-option>
            </el-select>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sopAddShow = false">取 消</el-button>
        <el-button type="primary" @click="userOperation">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<!-- 行为区域 -->
<script>
import templateTable from "@/components/templateTable.vue";
import * as userActionTypeApi from '@/api/customerManage/userActionTypeConfig'//获取行为类型数据
import * as api from '@/api/sop/customerOperationsSop'

export default {
  components: {
    templateTable
  },
  // 数据存放区域
  data() {
    return {
      dialogtitle: "新建SOP规则",
      dialogtype: "add",
      relativeTime: "",
      aterialList: [],//素材列表
      tagsArray: [],//标签组列表
      tagsSubSet: [],//标签列表
      behaviorTypeList: [],
      sopAddShow: false,//转出弹窗
      queryform: {
        sopName: "",
        sopStatus: "",
        pageNum: 1,
        pageSize: 20,
      },//页面检索对象
      form: {
        id: "",
        sopName: "",//名称
        sopDesc: "",//场景描述
        executeType: "",//触发类型
        behaviorId: "",//类型编码
        timeType: 1,//时间类型
        relativeTime: "",// 时间间隔
        absoluteTime: "",//日期
        tagGroupId: "",//标签组id
        tagIdlist: [],//标签id数组
        tagId: "",//标签id字符串
        materialId: "",//素材id
        domains: [{
          absoluteTime: ''
        }],
      },//提交表单
      rules: {
        sopName: [
          {
            required: true,
            message: '请输入名称',
            trigger: 'blur',
          },
        ],
        sopDesc: [
          {
            required: true,
            message: '请输入描述',
            trigger: 'blur',
          },
        ],
        executeType: [
          {
            required: true,
            message: '请选择触发类型',
            trigger: 'chnage',
          },
        ],
        behaviorId: [
          {
            required: true,
            message: '请选择行为类型编码',
            trigger: 'chnage',
          },
        ],
        timeType: [
          {
            required: true,
            message: '请选择时间类型',
            trigger: 'chnage',
          },
        ],
        relativeTime: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'chnage',
          },
        ],
        absoluteTime: [
          {
            required: true,
            message: '请选择时间',
            trigger: 'chnage',
          },
        ],
        tagGroupId: [
          {
            required: true,
            message: '请选择标签',
            trigger: 'chnage',
          },
        ],
        materialId: [
          {
            required: true,
            message: '请选择素材',
            trigger: 'chnage',
          },
        ],
      },
      Result: {

      },
      Columns: [
        { prop: "id", label: "SOPID", minWidth: 180, },
        { prop: "sopName", label: "SOP名称", minWidth: 180, },
        { prop: "sopDesc", label: "场景描述", minWidth: 180 },
        { prop: "executeType", label: "触发类型", minWidth: 180, formatter: this.executeTypeFormatter },
        { prop: "tagName", label: "关联标签", minWidth: 180 },
        { prop: "sopStatus", label: "启用状态", minWidth: 180, formatter: this.sopStatusFormatter },
        { prop: "createTime", label: "创建时间", minWidth: 180 },
      ],
    }
  },
  // 生命周期函数
  created() {
    this.userActionType();//获取行为类型
    this.fetchTags();
    this.materialListNew();
  },
  // 方法函数

  methods: {
    //多日期添加
    addDomain() {
      this.form.domains.push({
        absoluteTime: '',
        key: Date.now()
      });
    },
    //多个日期删除
    removeDomain(item) {
      var index = this.form.domains.indexOf(item)
      if (index !== -1) {
        this.form.domains.splice(index, 1)
      }
    },
    //编辑
    sopEdit(row) {
      this.dialogtype = 'edit';
      this.dialogtitle = '编辑SOP规则';
      api.getSop(row.id).then((res) => {
        if (res.code == 200) {
          res.data.tagIdlist = res.data.data.tagId.split(',')
          this.form.domains=res.data.data.absoluteTimeList;
          this.relativeTime = this.secondsToTimeFormat(res.data.data.relativeTime)
          Object.keys(this.form).forEach(key => {
            if (res.data.data.hasOwnProperty(key)) {
              this.form[key] = res.data.data[key];
            }
          });
          this.tagsSubSet = this.tagsArray.find(val => val.id == res.data.data.tagGroupId).weTags;//获取对应标签组标签列表
          this.sopAddShow = true;
        }
      })
    },
    //删除
    viewDel(row) {
      api.deleteSop(row.id).then((res) => {
        if (res.code == 200) {
          this.findPage();
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      })
    },
    //复制数据
    viewCopy(row) {
      api.copySop(row.id).then((res) => {
        if (res.code == 200) {
          this.findPage();
          this.$message({
            type: 'success',
            message: '复制成功!'
          });
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      })
    },
    executeTypeFormatter(row) {
      return row.executeType == 1 ? '时间触发' : '行为触发'
    },
    sopStatusFormatter(row) {
      let sopStatus = row.sopStatus;
      return sopStatus == 2 ? '停用' : '启用'
    },
    executeTypeChange() {
      this.form.behaviorId = "";
    },
    //获取素材
    materialListNew() {
      api.materialListNew().then((res) => {
        this.aterialList = res;
      })
    },
    //获取对应标签组标签列表
    tagsArrayChange(value) {
      this.form.tagIdlist = [];//清空历史
      this.tagsSubSet = this.tagsArray.find(val => val.id == value).weTags;
    },
    //获取标签组
    fetchTags() {
      api.tagList({
        pageNum: 1,
        pageSize: 100,
        groupName: '',
        groupTagType: 1,
      }).then((res) => {
        if (res.code == 200) {
          this.tagsArray = res.rows;
        }
      })
    },
    userActionType() {
      userActionTypeApi.behaviorList({
        name: "",
        delFlag: 0,
        pageNum: 1,
        pageSize: 10,
      }).then((res) => {
        if (res.code == 200) {
          this.behaviorTypeList = res.rows;
        }
      })
    },
    // 启用/停用
    viewEditStatus(row) {
      api.disableStatus(row.id).then((res) => {
        if (res.code == 200) {
          this.findPage();
          this.$message({
            type: 'success',
            message: '操作成功!'
          });
        } else {
          this.$message({
            type: 'error',
            message: res.msg,
          });
        }
      })
    },
    // 操作用户
    userOperation() {
      this.form.relativeTime = this.form.relativeTime ? this.convertTimeToSeconds(this.relativeTime) : '';
      let list = [];
      this.form.domains.map(val => {
        list.push(val.absoluteTime)
        return
      })
      this.form.absoluteTime = list;
      this.$refs['form'].validate((valid) => {
        if (valid) {
          this.form.tagId = this.form.tagIdlist.join(',');
          if (this.dialogtype == 'add') {
            api.addSop(this.form).then((res) => {
              if (res.code == 200) {
                this.sopAddShow = false;
                this.findPage();
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
              }
            })
          } else {
            api.updateSop(this.form).then((res) => {
              if (res.code == 200) {
                this.sopAddShow = false;
                this.findPage();
                this.$message({
                  type: 'success',
                  message: '编辑成功!'
                });
              }
            })
          }
        }
      })
    },
    /**
     * 停用
     * @param row status 状态 true 已绑定 false 未绑定
     */
    disableAction(row) {

    },   //列表查询
    findPage(data) {
      if (data && data.pageRequest) {
        this.queryform.pageNum = data.pageRequest.pageNum;
        this.queryform.pageSize = data.pageRequest.pageSize;
      }
      api.listSop(this.queryform).then((res) => {
        if (res.code == 200) {
          this.Result = res;
        }
      })
    },
    // 同步用户
    sopAdd() {
      this.sopAddShow = true;
      this.dialogtype = 'add';
      this.dialogtitle = '新建SOP规则';
      this.form = {
        id: "",
        sopName: "",//名称
        sopDesc: "",//场景描述
        executeType: "",//触发类型
        behaviorId: "",//类型编码
        timeType: 1,//时间类型
        relativeTime: "",// 时间间隔
        absoluteTime: "",//日期
        tagGroupId: "",//标签组id
        tagIdlist: [],//标签id数组
        tagId: "",//标签id字符串
        materialId: "",//素材id
        domains: [{
          value: ''
        }],
      }
      this.relativeTime = "";
    },
    resetForm() {
      this.queryform = {
        sopName: "",
        sopStatus: "",
        pageNum: 1,
        pageSize: 20,
      }
    },
    // 时间转换成秒
    convertTimeToSeconds(timeString) {
      const [hours, minutes] = timeString.split(':').map(Number);//分解为时 和 分
      // 计算总秒数
      const totalSeconds = (hours * 3600) + (minutes * 60);
      return totalSeconds;
    },
    //时分转换秒
    secondsToTimeFormat(seconds) {
      const hours = Math.floor(seconds / 3600); // 计算小时
      const minutes = Math.floor((seconds % 3600) / 60); // 计算分钟
      let timeString = '';
      if (hours > 0 && hours < 10) {
        timeString += `0${hours}:`;
      } else if (hours > 10) {
        timeString += `${hours}:`;
      } else {
        timeString += '00:'
      }
      if (minutes > 0 || hours > 0) {
        if (minutes < 10) {
          timeString += `0${minutes}`;

        } else {
          timeString += `${minutes}`;

        }
      }
      return timeString;
    }
  },
  // 计算属性
  computed: {
  }
}
</script>
<!-- 样式区域 -->
<style lang='scss' scoped></style>