Merge branch 'master' of http://git.mydig.net/Sagoo-Cloud/sagoo-admin-ui

src/api/datahub/index.ts

@@ -0,0 +1,13 @@
+import { get, post, del, put } from '/@/utils/request';
+
+export default {
+
+  common: {
+    getList: (params: object) => get('/common/base/db/list', params),
+    add: (data: object) => post('/common/base/db/add', data),
+    delete: (id: number) => del('/common/base/db/del', { id }),
+    edit: (data: object) => put('/common/base/db/edit', data),
+    detail: (id: number) => get('/common/base/db/detail', { id }),
+  },
+  
+}

src/api/device/index.ts

@@ -14,7 +14,8 @@ export default {
     message_protocol_list: (params: object) => get('/product/protocol/message_protocol_list', params),
     trunsport_protocol_list: (params: object) => get('/product/protocol/trunsport_protocol_list', params),
     getDataType: (params: object) => get('/product/tsl/data_type', params),
-  },
+    deploy: (data: object) => post('/product/deploy', data),
+    undeploy: (data: object) => post('/product/undeploy0', data),  },
   category:{
     getList: (params: object) => get('/product/category/list', params),
     add: (data: object) => post('/product/category/add', data),

src/views/datahub/source/component/detail.vue

@@ -0,0 +1,150 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog title="查看数据源" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+       
+        <el-form-item label="数据源名称" prop="name">
+          {{ruleForm.name}}
+        </el-form-item>
+
+        <el-form-item label="数据类型" prop="types">
+           {{ruleForm.types}}
+        </el-form-item>
+
+        <el-form-item label="地址" prop="host">
+          {{ruleForm.host}}
+        </el-form-item>
+
+         <el-form-item label="端口" prop="port">
+          {{ruleForm.port}}
+        </el-form-item>
+        <el-form-item label="用户名" prop="userName">
+          {{ruleForm.userName}}
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+           {{ruleForm.password}}
+        </el-form-item>
+  	
+        <el-form-item label="备注" prop="description">
+        {{ruleForm.description}}
+        </el-form-item>
+			</el-form>
+		
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import api from '/@/api/datahub';
+import {ElMessage} from "element-plus";
+interface RuleFormState {
+  id:number;
+  name:string;
+  types:string;
+  host:string;
+  port:string;
+  userName:string;
+  password:string;
+  description:string;
+  status:number;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+  rules:{}
+}
+
+export default defineComponent({
+	name: 'deviceEditPro',
+	setup(prop,{emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			isShowDialog: false,
+			ruleForm: {
+        id:0,
+        name:'',
+        types:'',
+        host:'',
+        port:'',
+        userName:'',
+        password:'',
+        description:'',
+        status:1,
+
+			},
+      rules: {
+       
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row: RuleFormState|null) => {
+      resetForm();
+
+
+      if (row){
+        // api.dict.getType(row.id).then((res:any)=>{
+        //   state.ruleForm = res.data.dictType
+        // })
+        state.ruleForm = row;
+      }
+			state.isShowDialog = true;
+		};
+    const resetForm = ()=>{
+      state.ruleForm = {
+       id:0,
+        name:'',
+        types:'',
+        host:'',
+        port:'',
+        userName:'',
+        password:'',
+        description:'',
+        status:1
+      }
+    };
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.id!==0){
+            //修改
+            api.common.edit(state.ruleForm).then(()=>{
+              ElMessage.success('数据源类型修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }else{
+            //添加
+            api.common.add(state.ruleForm).then(()=>{
+              ElMessage.success('数据源类型添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }
+        }
+      });
+		};
+
+
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>

src/views/datahub/source/component/edit.vue

@@ -0,0 +1,170 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog :title="(ruleForm.id!==0?'修改':'添加')+'数据源'" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+       
+        <el-form-item label="数据源名称" prop="name">
+          <el-input v-model="ruleForm.name" placeholder="请输入数据源名称" />
+        </el-form-item>
+
+        <el-form-item label="数据类型" prop="types">
+          <el-input v-model="ruleForm.types" placeholder="请输入数据类型" />
+        </el-form-item>
+
+        <el-form-item label="地址" prop="host">
+          <el-input v-model="ruleForm.host" placeholder="请输入地址" />
+        </el-form-item>
+
+         <el-form-item label="端口" prop="port">
+          <el-input v-model="ruleForm.port" placeholder="请输入端口" />
+        </el-form-item>
+        <el-form-item label="用户名" prop="userName">
+          <el-input v-model="ruleForm.userName" placeholder="请输入用户名" />
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input v-model="ruleForm.password" placeholder="请输入密码" />
+        </el-form-item>
+  	<el-form-item label="状态" prop="status">
+					<el-radio-group v-model="ruleForm.status"  >
+						<el-radio label="0">未启用</el-radio>
+
+						<el-radio label="1">启用</el-radio>
+					</el-radio-group>
+				</el-form-item>
+        <el-form-item label="备注" prop="description">
+          <el-input v-model="ruleForm.description" type="textarea" placeholder="请输入内容"></el-input>
+        </el-form-item>
+			</el-form>
+			<template #footer>
+				<span class="dialog-footer">
+					<el-button @click="onCancel" size="default">取 消</el-button>
+					<el-button type="primary" @click="onSubmit" size="default">{{ruleForm.id!==0?'修 改':'添 加'}}</el-button>
+				</span>
+			</template>
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import api from '/@/api/datahub';
+import {ElMessage} from "element-plus";
+interface RuleFormState {
+  id:number;
+  name:string;
+  types:string;
+  host:string;
+  port:string;
+  userName:string;
+  password:string;
+  description:string;
+  status:number;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+  rules:{}
+}
+
+export default defineComponent({
+	name: 'deviceEditPro',
+	setup(prop,{emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			isShowDialog: false,
+			ruleForm: {
+        id:0,
+        name:'',
+        types:'',
+        host:'',
+        port:'',
+        userName:'',
+        password:'',
+        description:'',
+        status:1,
+
+			},
+      rules: {
+        name: [
+          { required: true, message: "数据源名称不能为空", trigger: "blur" }
+        ],
+        types: [
+          { required: true, message: "数据源类型不能为空", trigger: "blur" }
+        ],
+        host: [{ required: true, message: '地址不能为空', trigger: 'blur' }],
+        port: [{ required: true, message: '端口不能为空', trigger: 'blur' }],
+        userName: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
+        password: [{ required: true, message: '请输入密码', trigger: 'blur' }],
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row: RuleFormState|null) => {
+      resetForm();
+
+
+      if (row){
+        // api.dict.getType(row.id).then((res:any)=>{
+        //   state.ruleForm = res.data.dictType
+        // })
+        state.ruleForm = row;
+      }
+			state.isShowDialog = true;
+		};
+    const resetForm = ()=>{
+      state.ruleForm = {
+       id:0,
+        name:'',
+        types:'',
+        host:'',
+        port:'',
+        userName:'',
+        password:'',
+        description:'',
+        status:1
+      }
+    };
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.id!==0){
+            //修改
+            api.common.edit(state.ruleForm).then(()=>{
+              ElMessage.success('数据源类型修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }else{
+            //添加
+            api.common.add(state.ruleForm).then(()=>{
+              ElMessage.success('数据源类型添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }
+        }
+      });
+		};
+
+
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>

src/views/datahub/source/index.vue

@@ -0,0 +1,202 @@
+<template>
+  <div class="system-dic-container">
+    <el-card shadow="hover">
+      <div class="system-user-search mb15">
+        <el-form :model="tableData.param" ref="queryRef" :inline="true" >
+          <el-form-item label="数据源名称" prop="name">
+            <el-input v-model="tableData.param.name" placeholder="请输入数据源名称" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+          </el-form-item>
+		  <el-form-item label="数据源类型" prop="types">
+            <el-input v-model="tableData.param.types" placeholder="请输入数据源类型" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+          </el-form-item>
+          <el-form-item label="数据源地址" prop="host">
+            <el-input v-model="tableData.param.host" placeholder="请输入数据源地址" clearable size="default" style="width: 240px" @keyup.enter.native="typeList" />
+          </el-form-item>
+      
+        
+          <el-form-item label="创建时间" prop="dateRange">
+            <el-date-picker v-model="tableData.param.dateRange" size="default" style="width: 240px" value-format="YYYY-MM-DD" type="daterange" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期"></el-date-picker>
+          </el-form-item>
+          <el-form-item>
+            <el-button size="default" type="primary" class="ml10" @click="typeList">
+              <el-icon>
+                <ele-Search />
+              </el-icon>
+              查询
+            </el-button>
+            <el-button size="default" @click="resetQuery(queryRef)">
+              <el-icon>
+                <ele-Refresh />
+              </el-icon>
+              重置
+            </el-button>
+            <el-button size="default" type="success" class="ml10" @click="onOpenAdd">
+              <el-icon>
+                <ele-FolderAdd />
+              </el-icon>
+              新增数据源
+            </el-button>
+      
+          </el-form-item>
+        </el-form>
+      </div>
+      <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
+        <el-table-column type="selection" width="55" align="center" />
+        <el-table-column label="ID" align="center" prop="id" width="80" />
+        <el-table-column label="数据源名称" prop="name" :show-overflow-tooltip="true" />
+        <el-table-column label="类型" prop="types" :show-overflow-tooltip="true" />
+        <el-table-column label="地址" prop="host" :show-overflow-tooltip="true" />
+        <el-table-column label="端口" prop="port" :show-overflow-tooltip="true" />
+       
+        
+        <el-table-column prop="status" label="状态" width="120" align="center">
+          <template #default="scope">
+            <el-tag type="success" size="small" v-if="scope.row.status==1">启用</el-tag>
+            <el-tag type="info" size="small" v-if="scope.row.status==0">未启用</el-tag>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" width="200" align="center">
+          <template #default="scope">
+		   			 <el-button size="small" text type="primary" @click="onOpenDetail(scope.row)">详情</el-button>
+
+            <el-button size="small" text type="warning" @click="onOpenEdit(scope.row)">修改</el-button>
+            <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+      <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
+    </el-card>
+    <EditDic ref="editDicRef" @typeList="typeList" />
+	    <Detail ref="detailRef"  />
+
+  </div>
+</template>
+
+<script lang="ts">
+import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
+import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
+import EditDic from './component/edit.vue';
+import api from '/@/api/datahub';
+import Detail from './component/detail.vue';
+
+// 定义接口来定义对象的类型
+interface TableDataRow {
+	id: number;
+	name: string;
+	key: string;
+	status: number;
+	desc: string;
+	createBy: string;
+}
+interface TableDataState {
+	ids: number[];
+	tableData: {
+		data: Array<TableDataRow>;
+		total: number;
+		loading: boolean;
+		param: {
+			pageNum: number;
+			pageSize: number;
+			name: string;
+			key: string;
+			status: string;
+			dateRange: string[];
+		};
+	};
+}
+
+export default defineComponent({
+	name: 'deviceInstance',
+	components: { EditDic,Detail },
+	setup() {
+		const addDicRef = ref();
+		const editDicRef = ref();
+		const queryRef = ref();
+		const detailRef=ref();
+		const state = reactive<TableDataState>({
+			ids: [],
+			tableData: {
+				data: [],
+				total: 0,
+				loading: false,
+				param: {
+					pageNum: 1,
+					pageSize: 10,
+					name: '',
+					types: '',
+					status:'-1',
+				},
+			},
+		});
+		// 初始化表格数据
+		const initTableData = () => {
+			typeList();
+		};
+		const typeList = () => {
+			api.common.getList(state.tableData.param).then((res: any) => {
+				state.tableData.data = res.Data;
+				state.tableData.total = res.total;
+			});
+		};
+		// 打开新增产品弹窗
+		const onOpenAdd = () => {
+			editDicRef.value.openDialog();
+		};
+		// 打开修改产品弹窗
+		const onOpenEdit = (row: TableDataRow) => {
+			editDicRef.value.openDialog(row);
+		};
+		// 删除产品
+		const onRowDel = (row: TableDataRow) => {
+
+			let msg = '你确定要删除所选数据？';
+			msg = `此操作将永久删除数据源：“${row.name}”，是否继续?`;
+			
+			ElMessageBox.confirm(msg, '提示', {
+				confirmButtonText: '确认',
+				cancelButtonText: '取消',
+				type: 'warning',
+			})
+				.then(() => {
+					api.common.delete(row.id).then(() => {
+						ElMessage.success('删除成功');
+						typeList();
+					});
+				})
+				.catch(() => {});
+		};
+		// 页面加载时
+		onMounted(() => {
+			initTableData();
+		});
+		/** 重置按钮操作 */
+		const resetQuery = (formEl: FormInstance | undefined) => {
+			if (!formEl) return;
+			formEl.resetFields();
+			typeList();
+		};
+		// 多选框选中数据
+		const handleSelectionChange = (selection: TableDataRow[]) => {
+			state.ids = selection.map((item) => item.id);
+		};
+		//查看详情
+		const onOpenDetail=(row: TableDataRow)=>{
+			detailRef.value.openDialog(row);
+		}
+		return {
+			addDicRef,
+			editDicRef,
+			queryRef,
+			detailRef,
+			onOpenAdd,
+			onOpenDetail,
+			onOpenEdit,
+			onRowDel,
+			typeList,
+			resetQuery,
+			handleSelectionChange,
+			...toRefs(state),
+		};
+	},
+});
+</script>

src/views/device/instance/component/detail.vue

@@ -0,0 +1,165 @@
+<template>
+	<div class="system-edit-dic-container">
+		<el-dialog title="查看设备" v-model="isShowDialog" width="769px">
+			<el-form :model="ruleForm" ref="formRef" :rules="rules" size="default" label-width="110px">
+       <el-form-item label="设备标识" prop="key">
+          {{ruleForm.key}}
+        </el-form-item>
+        <el-form-item label="设备名称" prop="name">
+          {{ruleForm.name}}
+        </el-form-item>
+
+        
+
+           <el-form-item label="所属产品" prop="productId">
+       
+                {{ruleForm.productName}}
+            </el-form-item> 
+
+         <el-form-item label="所属部门" prop="deptId">
+               {{ruleForm.deptName}}
+            </el-form-item> 
+
+           
+        
+        <el-form-item label="设备证书" prop="certificate">
+            {{ruleForm.certificate}}
+        </el-form-item>
+
+        <el-form-item label="设备秘钥" prop="secureKey">
+            {{ruleForm.secureKey}}
+        </el-form-item>
+
+         <el-form-item label="固件版本号" prop="version">
+          {{ruleForm.version}}
+        </el-form-item>
+      
+  
+        <el-form-item label="备注" prop="desc">
+           {{ruleForm.desc}}
+        </el-form-item>
+			</el-form>
+
+		</el-dialog>
+	</div>
+</template>
+
+<script lang="ts">
+import { reactive, toRefs, defineComponent,ref, unref } from 'vue';
+import api from '/@/api/device';
+import {ElMessage} from "element-plus";
+interface RuleFormState {
+  id:number;
+  name:string;
+  certificate:string;
+  secureKey:string;
+  version:string;
+  productId:number;
+  deptId:number;
+  desc:string;
+}
+interface DicState {
+	isShowDialog: boolean;
+	ruleForm: RuleFormState;
+  rules:{}
+}
+
+export default defineComponent({
+	name: 'deviceEditPro',
+	setup(prop,{emit}) {
+    const formRef = ref<HTMLElement | null>(null);
+		const state = reactive<DicState>({
+			isShowDialog: false,
+      productData: [], // 分类数据
+      deptData: [], // 
+			ruleForm: {
+        id:0,
+        name:'',
+        productId:'',
+        deptId:0,
+        certificate:'',
+        secureKey:'',
+        version:'',
+        desc:''
+			},
+      rules: {
+       
+      }
+		});
+		// 打开弹窗
+		const openDialog = (row: RuleFormState|null) => {
+      resetForm();
+
+        api.product.getLists({ status: 1 }).then((res: any) => {
+          state.productData = res.product || [];
+        });
+        api.dept.getList({ status: -1 }).then((res: any) => {
+          state.deptData = res || [];
+        });
+
+
+      if (row){
+        // api.dict.getType(row.id).then((res:any)=>{
+        //   state.ruleForm = res.data.dictType
+        // })
+        state.ruleForm = row;
+      }
+			state.isShowDialog = true;
+		};
+    const resetForm = ()=>{
+      state.ruleForm = {
+        id:0,
+        name:'',
+        productId:'',
+        deptId:0,
+        certificate:'',
+        secureKey:'',
+        version:'',
+        desc:''
+      }
+    };
+		// 关闭弹窗
+		const closeDialog = () => {
+			state.isShowDialog = false;
+		};
+		// 取消
+		const onCancel = () => {
+			closeDialog();
+		};
+		// 新增
+		const onSubmit = () => {
+      const formWrap = unref(formRef) as any;
+      if (!formWrap) return;
+      formWrap.validate((valid: boolean) => {
+        if (valid) {
+          if(state.ruleForm.id!==0){
+            //修改
+            api.instance.edit(state.ruleForm).then(()=>{
+              ElMessage.success('设备类型修改成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }else{
+            //添加
+            api.instance.add(state.ruleForm).then(()=>{
+              ElMessage.success('设备类型添加成功');
+              closeDialog(); // 关闭弹窗
+              emit('typeList')
+            })
+          }
+        }
+      });
+		};
+
+
+		return {
+			openDialog,
+			closeDialog,
+			onCancel,
+			onSubmit,
+      formRef,
+			...toRefs(state),
+		};
+	},
+});
+</script>

src/views/device/instance/detail.vue

@@ -1,5 +0,0 @@
-<template>
-  <div class="system-dic-container">
-  </div>
- </template>
-    

src/views/device/instance/index.vue

@@ -52,8 +52,8 @@
       <el-table :data="tableData.data" style="width: 100%" @selection-change="handleSelectionChange">
         <el-table-column type="selection" width="55" align="center" />
         <el-table-column label="ID" align="center" prop="id" width="80" />
+	    <el-table-column label="设备标识" prop="key" :show-overflow-tooltip="true" />
         <el-table-column label="设备名称" prop="name" :show-overflow-tooltip="true" />
-        <el-table-column label="设备标识" prop="key" :show-overflow-tooltip="true" />
         <el-table-column label="产品名称" prop="productName" :show-overflow-tooltip="true" />
         <el-table-column label="部门名称" prop="deptName" :show-overflow-tooltip="true" />
        
@@ -69,9 +69,8 @@
          <el-table-column prop="lastOnlineTime" label="最后上线时间" align="center" width="180"></el-table-column> 
         <el-table-column label="操作" width="200" align="center">
           <template #default="scope">
-		   <router-link :to="'/device/instance/detail/' + scope.row.id" class="link-type" style="padding-right: 10px;color: #409eff;">
-              <span>详情</span>
-            </router-link>
+	
+			 <el-button size="small" text type="primary" @click="onOpenDetail(scope.row)">详情</el-button>
             <el-button size="small" text type="warning" @click="onOpenEditDic(scope.row)">修改</el-button>
             <el-button size="small" text type="danger" @click="onRowDel(scope.row)">删除</el-button>
           </template>
@@ -80,6 +79,7 @@
       <pagination v-show="tableData.total>0" :total="tableData.total" v-model:page="tableData.param.pageNum" v-model:limit="tableData.param.pageSize" @pagination="typeList" />
     </el-card>
     <EditDic ref="editDicRef" @typeList="typeList" />
+    <Detail ref="detailRef"  />
   </div>
 </template>
 
@@ -87,6 +87,7 @@
 import { toRefs, reactive, onMounted, ref, defineComponent } from 'vue';
 import { ElMessageBox, ElMessage, FormInstance } from 'element-plus';
 import EditDic from './component/edit.vue';
+import Detail from './component/detail.vue';
 import api from '/@/api/device';
 
 // 定义接口来定义对象的类型
@@ -117,10 +118,11 @@ interface TableDataState {
 
 export default defineComponent({
 	name: 'deviceInstance',
-	components: { EditDic },
+	components: { EditDic,Detail },
 	setup() {
 		const addDicRef = ref();
 		const editDicRef = ref();
+		const detailRef=ref();
 		const queryRef = ref();
 		const state = reactive<TableDataState>({
 			ids: [],
@@ -149,6 +151,11 @@ export default defineComponent({
 				state.tableData.total = res.total;
 			});
 		};
+
+		//查看详情
+		const onOpenDetail=(row: TableDataRow)=>{
+			detailRef.value.openDialog(row);
+		}
 		// 打开新增产品弹窗
 		const onOpenAddDic = () => {
 			editDicRef.value.openDialog();
@@ -201,7 +208,9 @@ export default defineComponent({
 		return {
 			addDicRef,
 			editDicRef,
+			detailRef,
 			queryRef,
+			onOpenDetail,
 			onOpenAddDic,
 			onOpenEditDic,
 			onRowDel,

src/views/device/product/detail.vue

@@ -3,8 +3,9 @@
 		<div class="content">
 			<div class="cont_box">
 				<div class="title">产品：{{ detail.name }}</div>
-				<div class="pro-status"><span class="on"></span>已发布</div>
-				<div class="pro-option">停用</div>
+				<div class="pro-status" ><span :class="developer_status==1?'on':'off'"></span>{{developer_status==1?'已发布':'未发布'}}</div>
+			
+				<div class="pro-option"  @click="CkOption"> {{developer_status==1?'停用':'启用'}}</div>
 			</div>
 		</div>
 
@@ -215,6 +216,7 @@ export default defineComponent({
 			activeName: '1', // 分类数据
 			activetab: 'attr', // 分类数据
 			detail: [],
+			developer_status:0,
 			tableData: {
 				data: [],
 				total: 0,
@@ -233,6 +235,7 @@ export default defineComponent({
 			const ids = route.params && route.params.id;
 			api.product.detail(ids).then((res: any) => {
 				state.detail = res.data;
+				state.developer_status=res.data.status
 			});
 
 			//第一次加载
@@ -382,6 +385,25 @@ export default defineComponent({
 			console.log(tab, event);
 		};
 
+		const CkOption=()=>{
+
+			if(state.developer_status==1){
+				api.product.undeploy({id:route.params.id}).then((res: any) => {
+					ElMessage.success('操作成功');
+					state.developer_status=0;
+				});
+			}else{
+				api.product.deploy({id:route.params.id}).then((res: any) => {
+					ElMessage.success('操作成功');
+					state.developer_status=1;
+				});
+			}
+			
+
+			
+
+		}
+
 		return {
 			Edit,
 			editDicRef,
@@ -389,6 +411,7 @@ export default defineComponent({
 			editFunRef,
 			editEventRef,
 			editTabRef,
+			CkOption,
 			onRowDel,
 			onEditAttr,
 			getList,
@@ -450,6 +473,7 @@ export default defineComponent({
 	line-height: 40px;
 	margin-left: 10px;
 	color: #1890ff;
+	cursor: pointer;
 }
 .content-box .pro-box {
 	display: flex;