sop管理、商品管理页面

env.js

@@ -34,8 +34,8 @@ const envs = {
     _ISCDN: true, // 是否开启cdn加速
   },
   development: {
-    DOMAIN: 'http://192.168.0.52:6180',//董鑫
-    // DOMAIN: 'http://192.168.0.106:6180',//屈晨
+    // DOMAIN: 'http://192.168.0.52:6180',//董鑫
+    DOMAIN: 'http://192.168.0.106:6180',//屈晨
     BASE_URL: './', // 路由基础路径
     BASE_API: 'https://scrm-gw.chinacoal-ins.com',
     // BASE_API: 'http://10.1.37.249:6180',

src/api/sop/customerOperationsSop.js

@@ -0,0 +1,73 @@
+import request from '@/utils/request'
+const service = window.lwConfig.services.wecom
+//智能打标
+//  获取标签组
+export function tagList(params) {
+  return request({
+    url: service+'/tag/list',
+    method: 'get',
+    params
+  })
+}
+//  新增
+export function addSop(data) {
+  return request({
+    url: service+'/sop/addSop',
+    method: 'post',
+    data
+  })
+}
+
+// 编辑
+export function updateSop(data) {
+  return request({
+    url: service+'/sop/updateSop',
+    method: 'post',
+    data
+  })
+}
+
+//查询
+export function getSop(id) {
+  return request({
+    url: service + '/sop/getSop?id='+id,
+    method: 'get',
+  })
+}
+// 删除
+export function deleteSop(id) {
+  return request({
+    url: service + '/sop/deleteSop?id='+id,
+    method: 'get',
+  })
+}
+//sop分页列表
+
+export function listSop(params) {
+  return request({
+    url: service + '/sop/listSop',
+    method: 'get',
+    params
+  })
+}
+//启用/禁用
+export function disableStatus(id) {
+  return request({
+    url: service + '/sop/disableStatus?id='+id,
+    method: 'get',
+  })
+}
+//sop复制
+export function copySop(id) {
+  return request({
+    url: service + '/sop/copySop?id='+id,
+    method: 'get',
+  })
+}
+//获取素材
+export function materialListNew() {
+  return request({
+    url: service + '/material/listNew',
+    method: 'get',
+  })
+}

src/views/commodityCenter/commodityManage/detail.vue

@@ -1,161 +1,33 @@
+<!-- 模板区域 -->
+<template>
+  <div>
+    <!-- 模板内容 -->
+    <div class="g-card">
+      <span class="g-card-title">商品详情页</span>
+    </div>
+
+  </div>
+</template>
+
+<!-- 行为区域 -->
 <script>
-import TimeSearchTitle from '@/components/common/TimeSearchTitle'
-import ChartLine from '@/components/ChartLine.vue'
-import * as api from '@/api/commodityCenter/commodityManage'
 export default {
-  name: '',
-  components: { TimeSearchTitle, ChartLine },
+  // 数据存放区域
   data() {
     return {
-      loading: false,
-      list: [],
-      legend: ['订单总额', '退款总额', '净收入'],
-      xData: [],
-      series: [],
-      cardData: [],
-      active: 0,
-      api,
-      form: {
-        picture: '',
-        price: 1,
-        describe: '',
-        attachments: [],
-      },
     }
   },
-  computed: {},
-  watch: {},
+  // 生命周期函数
   created() {
-    this.getDetail()
-    this.getList()
-    this.getTop5Fn()
+    console.log(this.$route.query.info)
   },
-  mounted() {},
+  // 方法函数
   methods: {
-    getDetail() {
-      api.getDetail(this.$route.query.id).then((res) => {
-        this.form = res.data
-        this.form.attachments = this.form.attachments.split(',')
-      })
-    },
-    getTop5Fn() {
-      this.loading = true
-      api.getDetailTable(this.$route.query.id).then((res) => {
-        if (res.code === 200) {
-          this.list = res.data
-        }
-        this.loading = false
-      })
-    },
-    getList() {
-      this.loading = true
-      api
-        .getDetailTotal(this.$route.query.id)
-        .then(({ data }) => {
-          this.cardData = [
-            {
-              title: '订单总数',
-              tips: '所有商品全部的订单总数',
-              value: data.orderNum,
-            },
-            {
-              title: '订单总额(元)',
-              tips: '所有商品全部的订单总额，精确到两位小数点',
-              value: data.orderFee,
-            },
-            {
-              title: '退款总额(元)',
-              tips: '所有商品全部的退款总额，精确到两位小数点',
-              value: data.refundFee,
-            },
-            {
-              title: '净收入(元)',
-              tips: '订单总额-退款总额，精确到两位小数点',
-              value: data.netIncome,
-            },
-          ]
-        })
-        .catch((e) => {})
-        .finally(() => {})
-    },
-    getLineData(data) {
-      let val = {
-        type: 'customization',
-        startDate: data.beginTime,
-        endDate: data.endTime,
-        productId: this.$route.query.id,
-      }
-      api.getDetailChart(val).then((res) => {
-        this.xData = res.data.xAxis.data
-        this.legend = res.data.legend.data
-        let arr1 = []
-        let arr2 = []
-        let arr3 = []
-        if (res.data.series && res.data.series.length) {
-          arr1 = res.data.series[0].data
-          arr2 = res.data.series[1].data
-          arr3 = res.data.series[2].data
-        }
-        this.series = [arr1, arr2, arr3]
-      })
-    },
   },
+  // 计算属性
+  computed: {
+  }
 }
 </script>
-
-<template>
-  <div>
-    <el-row :gutter="10" type="flex">
-      <el-col :span="18">
-        <CardGroupIndex :data="cardData"></CardGroupIndex>
-        <div class="g-card">
-          <div class="g-card-title">数据趋势</div>
-          <time-search-title @search="getLineData"></time-search-title>
-          <chart-line style="height: 300px" :legend="legend" :xData="xData" :series="series"></chart-line>
-        </div>
-        <div class="g-card">
-          <div class="g-card-title">员工订单Top5</div>
-          <el-table v-loading="loading" :data="list" style="width: 100%">
-            <el-table-column label="员工" align="center" min-width="100" prop="weUserName" />
-            <el-table-column label="订单总数" align="center" prop="orderNum" min-width="100"></el-table-column>
-            <el-table-column label="订单总额（元）" align="center" prop="totalFee" min-width="100"></el-table-column>
-          </el-table>
-        </div>
-      </el-col>
-      <el-col :span="6" style="min-width: 320px; display: flex; justify-content: space-around">
-        <PhoneTemplate>
-          <div class="phone-content">
-            <el-image
-              class="commodity-img commodity-thumb"
-              style="width: 100%; height: 100px"
-              :src="form.picture"></el-image>
-            <div class="price">￥{{ form.price }}</div>
-            <div class="content">{{ form.describe }}</div>
-            <el-image
-              v-for="(item, index) in form.attachments"
-              class="commodity-img"
-              :src="item"
-              :key="index"></el-image>
-          </div>
-        </PhoneTemplate>
-      </el-col>
-    </el-row>
-  </div>
-</template>
-
-<style lang="scss" scoped>
-.phone-content {
-  padding: 10px;
-}
-.price {
-  font-weight: 500;
-  font-size: 20px;
-  margin: 10px 0;
-}
-.content {
-  margin: 10px 0;
-}
-.commodity-img {
-  width: 100%;
-}
-</style>
+<!-- 样式区域 -->
+<style lang='scss' scoped></style>

src/views/commodityCenter/commodityManage/list.vue

@@ -3,14 +3,14 @@
   <div>
     <!-- 模板内容 -->
     <el-form ref="queryForm" :inline="true" :model="queryform" label-width="100px" class="top-search">
-      <el-form-item label="商品名称" prop="name">
-        <el-input v-model="queryform.name" placeholder="请输入"></el-input>
+      <el-form-item label="商品名称" >
+        <el-input v-model="queryform.productName" placeholder="请输入" clearable></el-input>
       </el-form-item>
-      <el-form-item label="状态" prop="name">
-        <el-select v-model="queryform.labelName" placeholder="请选择，支持关键词搜索" clearable filterable>
-          <el-option label="全部" value="1"></el-option>
-          <el-option label="已绑定" value="2"></el-option>
-          <el-option label="未绑定" value="3"></el-option>
+      <el-form-item label="状态" >
+        <el-select v-model="queryform.productStatus" placeholder="请选择状态" clearable filterable>
+          <el-option label="全部" value=" "></el-option>
+          <el-option label="上架" value="1"></el-option>
+          <el-option label="下架" value="0"></el-option>
         </el-select>
       </el-form-item>
       <el-form-item>
@@ -23,17 +23,28 @@
         :showBatchDelete="false" :data="Result" :columns="Columns" @findPage="findPage">
         <template slot="buttonSlot" slot-scope="{ row }">
           <el-button type="text" @click="viewDetails(row)">查看</el-button>
-          <el-button type="text" @click="viewDetails(row)">一键分享</el-button>
+          <el-button v-if="row.productStatus==1" type="text" @click="linkShare(row)">一键分享</el-button>
         </template>
       </templateTable>
     </div>
+    <el-dialog title="生成推广链接" :visible.sync="linkShareShow" width="40%">
+      <div class="flex a-c">
+        <span>推广链接</span>
+            <el-input v-model="queryform.productName" placeholder="请输入推广链接" clearable style="width: 70%;margin: 0 20px;"></el-input>
+          <el-button   @click="linkShare(row)">复制</el-button>
+      </div>
+      <span slot="footer" class="dialog-footer">
+        <el-button @click="linkShareShow = false">取 消</el-button>
+        <el-button type="primary" @click="linkShareShow=false">确 定</el-button>
+      </span>
+    </el-dialog>
   </div>
 </template>
 
 <!-- 行为区域 -->
 <script>
+import axios from 'axios';
 import templateTable from "@/components/templateTable.vue";
-import { Row } from "element-ui";
 export default {
   components: {
     templateTable
@@ -41,7 +52,13 @@ export default {
   // 数据存放区域
   data() {
     return {
-      queryform: {},//页面检索对象
+      linkShareShow:false,//链接分享弹窗
+      queryform: {
+        productName:"",//商品名称
+        productStatus:"",//上架状态
+        pageNum:1,
+        pageSize:10,
+      },//页面检索对象
       form: {},//提交表单
       rules: {
         labelName: [
@@ -53,46 +70,64 @@ export default {
         ],
 
       },
+
       Result: {
-        content: [
-          {
-            name: "3232",
-            status: true
-          },
-          {
-            name: "3232",
-            status: false
-          }
-        ],
-        totalSize: 100,
+
       },
       Columns: [
-        { prop: "name", label: "商品名称", minWidth: 180, },
-        { prop: "name", label: "商品类目", minWidth: 180, },
-        { prop: "mobile", label: "价格", minWidth: 180 },
-        { prop: "mobile", label: "供应商名称", minWidth: 180 },
-        { prop: "mobile", label: "已售", minWidth: 180 },
-        { prop: "mobile", label: "状态", minWidth: 180 },
+        { prop: "productName", label: "商品名称", minWidth: 180, },
+        { prop: "categoryName", label: "商品类目", minWidth: 180, },
+        { prop: "soldPrice", label: "价格", minWidth: 180, formatter: this.soldPriceFormatter},
+        { prop: "merchantName", label: "商户名称", minWidth: 180 },
+        { prop: "soldQuantity", label: "已售", minWidth: 180 },
+        { prop: "productStatus", label: "状态", minWidth: 180,formatter: this.productStatusFormatter },
       ],
     }
   },
   // 生命周期函数
   created() {
+
   },
   // 方法函数
   methods: {
+    soldPriceFormatter(row){
+      return row.soldPrice+'元';
+    },
+    productStatusFormatter(row){
+      return row.productStatus==0?"下架":"上架"
+    },
     // 查看详情
-    viewDetails() {
+    viewDetails(row) {
+      this.$router.push({
+        path: 'commodityManageDetail',
+        query: {info:row },
+      })
     },
     /**
      * 停用
      * @param row status 状态 true 已绑定 false 未绑定
      */
-    disableAction(row) {
-
-    },   //列表查询
-    findPage() {
-      console.log(1)
+    linkShare(row) {
+        this.linkShareShow=true;
+    },
+    async findPage(data) {
+      if (data && data.pageRequest) {
+        this.queryform.pageNum = data.pageRequest.pageNum;
+        this.queryform.pageSize = data.pageRequest.pageSize;
+      }
+      try {
+        const res = await axios.get('https://test.baoxianzhanggui.com/locallive-java/customer/product/getPageProductList', {
+          params:this.queryform,
+        });
+        this.Result = {
+          rows:res.data.rows,
+          pageNum:res.data.pageNum,
+          pageSize:res.data.pageSize,
+          total:res.data.total,
+        };
+      } catch (error) {
+        console.error('获取产品列表失败:', error);
+      }
     },
   },
   // 计算属性

src/views/customerOperation/smartTagging.vue

@@ -94,7 +94,7 @@
 <!-- 行为区域 -->
 <script>
 import templateTable from "@/components/templateTable.vue";
-import * as api from '@/api/customerManage/smartTagging'//智能达标api
+import * as api from '@/api/customerManage/smartTagging'//智能打标api
 import * as userActionTypeApi from '@/api/customerManage/userActionTypeConfig'//获取行为类型数据
 
 export default {

src/views/customerOperations/sop/list.vue

@@ -3,14 +3,14 @@
   <div>
     <!-- 模板内容 -->
     <el-form ref="queryForm" :inline="true" :model="queryform" label-width="100px" class="top-search">
-      <el-form-item label="SOP名称" prop="name">
-        <el-input v-model="queryform.name" placeholder="请输入"></el-input>
+      <el-form-item label="SOP名称" >
+        <el-input v-model="queryform.sopName" placeholder="请输入"></el-input>
       </el-form-item>
-      <el-form-item label="启用状态" prop="name">
-        <el-select v-model="queryform.labelName" placeholder="请选择，支持关键词搜索" clearable filterable>
-          <el-option label="全部" value="1"></el-option>
-          <el-option label="已绑定" value="2"></el-option>
-          <el-option label="未绑定" value="3"></el-option>
+      <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>
@@ -24,62 +24,72 @@
           新建
         </el-button>
       </div>
-      <templateTable ref="commonTable" :operationWidth="200" :SerialShow="true" :showOperation="true"
+      <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="viewDetails(row)">编辑</el-button>
-          <el-button type="text" @click="viewDetails(row)">复制</el-button>
-          <el-button type="text" @click="viewDetails(row)">删除</el-button>
-          <el-button type="text" @click="viewDetails(row)">停用</el-button>
+          <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="新建SOP规则" :visible.sync="sopAddShow" width="30%">
+    <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="labelName">
-            <el-input v-model="form.name" placeholder="请输入行为类型编码"></el-input>
+        <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="labelName">
-            <el-input type="textarea" v-model="form.desc" maxlength="200" show-word-limit
+          <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="labelName">
-            <el-select v-model="queryform.labelName" placeholder="请选择" clearable filterable>
-              <el-option label="行为触发" value="2"></el-option>
-              <el-option label="时间触发" value="3"></el-option>
+          <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="labelName">
-            <el-select v-model="queryform.labelName" placeholder="请选择" clearable filterable>
-              <el-option label="行为触发" value="2"></el-option>
-              <el-option label="时间触发" value="3"></el-option>
+          <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 prop="labelName">
-            <el-radio-group v-model="queryform.radio">
-              <el-radio :label="3">相对时间</el-radio>
-              <el-radio :label="6">绝对时间</el-radio>
+          <el-form-item label="时间类型" prop="timeType">
+            <el-radio-group v-model="form.timeType">
+              <el-radio :label="1">相对时间</el-radio>
+              <el-radio :label="2">绝对时间</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="时间间隔" prop="labelName">
-            <el-input v-model="form.desc" placeholder="输入天数"></el-input>
+          <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 label="选择日期" prop="labelName">
-            <el-date-picker v-model="form.value2" type="date" placeholder="选择日期"
-              value-format="yyyy-MM-dd">
+          <el-form-item label="选择日期" prop="absoluteTime" v-if="form.timeType == 2">
+            <el-date-picker v-model="form.absoluteTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd"
+              style="width: 100%;">
             </el-date-picker>
           </el-form-item>
-          <el-form-item label="关联标签" prop="labelName">
-            <el-select v-model="queryform.labelName" placeholder="请选择，支持关键词搜索" clearable filterable>
-              <el-option label="行为触发" value="2"></el-option>
-              <el-option label="时间触发" value="3"></el-option>
+          <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="labelName">
-            <el-select v-model="queryform.labelName" placeholder="请选择，支持关键词搜索" clearable filterable>
-              <el-option label="行为触发" value="2"></el-option>
-              <el-option label="时间触发" value="3"></el-option>
+          <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>
@@ -95,7 +105,9 @@
 <!-- 行为区域 -->
 <script>
 import templateTable from "@/components/templateTable.vue";
-import { Row } from "element-ui";
+import * as userActionTypeApi from '@/api/customerManage/userActionTypeConfig'//获取行为类型数据
+import * as api from '@/api/sop/customerOperationsSop'
+
 export default {
   components: {
     templateTable
@@ -103,56 +115,266 @@ export default {
   // 数据存放区域
   data() {
     return {
+      dialogtitle: "新建SOP规则",
+      dialogtype: "add",
+      relativeTime: "",
+      aterialList: [],//素材列表
+      tagsArray: [],//标签组列表
+      tagsSubSet: [],//标签列表
+      behaviorTypeList: [],
       sopAddShow: false,//转出弹窗
-      queryform: {},//页面检索对象
-      form: {},//提交表单
+      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
+      },//提交表单
       rules: {
-        labelName: [
+        sopName: [
+          {
+            required: true,
+            message: '请输入名称',
+            trigger: 'blur',
+          },
+        ],
+        sopDesc: [
+          {
+            required: true,
+            message: '请输入描述',
+            trigger: 'blur',
+          },
+        ],
+        executeType: [
           {
             required: true,
-            message: '请选择员工',
+            message: '请选择触发类型',
             trigger: 'chnage',
           },
         ],
-
-      },
-      Result: {
-        content: [
+        behaviorId: [
           {
-            name: "3232",
-            status: true
+            required: true,
+            message: '请选择行为类型编码',
+            trigger: 'chnage',
           },
+        ],
+        timeType: [
           {
-            name: "3232",
-            status: false
-          }
+            required: true,
+            message: '请选择时间类型',
+            trigger: 'chnage',
+          },
+        ],
+        relativeTime: [
+          {
+            required: true,
+            message: '请选择时间',
+            trigger: 'chnage',
+          },
         ],
-        totalSize: 100,
+        absoluteTime: [
+          {
+            required: true,
+            message: '请选择时间',
+            trigger: 'chnage',
+          },
+        ],
+        tagGroupId: [
+          {
+            required: true,
+            message: '请选择标签',
+            trigger: 'chnage',
+          },
+        ],
+        materialId: [
+          {
+            required: true,
+            message: '请选择素材',
+            trigger: 'chnage',
+          },
+        ],
+      },
+      Result: {
+
       },
       Columns: [
-        { prop: "name", label: "SOPID", minWidth: 180, },
-        { prop: "name", label: "SOP名称", minWidth: 180, },
-        { prop: "mobile", label: "场景描述", minWidth: 180 },
-        { prop: "mobile", label: "触发类型", minWidth: 180 },
-        { prop: "mobile", label: "关联标签", minWidth: 180 },
-        { prop: "mobile", label: "启用状态", minWidth: 180 },
-        { prop: "mobile", label: "创建时间", minWidth: 180 },
+        { 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: {
-    // 查看详情
-    viewDetails() {
+    //编辑
+    sopEdit(row) {
+      this.dialogtype = 'edit';
+      this.dialogtitle = '编辑SOP规则';
+      api.getSop(row.id).then((res) => {
+        if (res.code == 200) {
+          res.data.tagIdlist = res.data.tagId.split(',')
+          this.relativeTime = this.secondsToTimeFormat(res.data.relativeTime)
+          Object.keys(this.form).forEach(key => {
+            if (res.data.hasOwnProperty(key)) {
+              this.form[key] = res.data[key];
+            }
+          });
+          this.tagsSubSet = this.tagsArray.find(val => val.id == res.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.convertTimeToSeconds(this.relativeTime);
       this.$refs['form'].validate((valid) => {
         if (valid) {
-          console.log(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: '编辑成功!'
+                });
+              }
+            })
+          }
         }
       })
     },
@@ -163,13 +385,76 @@ export default {
     disableAction(row) {
 
     },   //列表查询
-    findPage() {
-      console.log(1)
+    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
+      }
+      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: {