feat: 添加生态流量页面&做大屏分辨率适配

web

2025-03-19 ae8d9d380854076d0b2da145576ae08f14a8f835

 src/views/system/dict/index.vue

@@ -1,38 +1,38 @@
 
<script setup name="Post">
import { sysDictType,sysDictData} from "@/api/system/dict";
import { onMounted } from "vue";
<script setup>
import {sysDictType, sysDictData} from "@/api/system/dict";
import {onMounted} from "vue";
import setPostParams from "@/utils/searchParams.js";
const { proxy } = getCurrentInstance();

const {proxy} = getCurrentInstance();

const loading = ref(true); //加载状态

/** 区域table相关 */
const tableData = ref([]); //数据字典列表
const total = ref(0); 
const total = ref(0);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
let  tableHeader = ref({
let tableHeader = ref({
    dictName: '字典名称',
    dictType: '字典类型',
    remark:'备注',
    updateTimeView:'更新时间'
   })
   //获取列表数据
const getList = async(val) => {
    remark: '备注',
    updateTimeView: '更新时间'
})
//获取列表数据
const getList = async (val) => {

   loading.value = true;
    loading.value = true;
    let postParam = setPostParams(val)
   let res = await sysDictType().search(postParam)
   if(res.code == 200) {
         loading.value = false;
         tableData.value = res.data.list;
         
         total.value = res.data.total;
         search.page = res.data.page;
         search.limit = res.data.limit;
   }
    let res = await sysDictType().search(postParam)
    if (res.code == 200) {
        loading.value = false;
        tableData.value = res.data.list;

        total.value = res.data.total;
        search.page = res.data.page;
        search.limit = res.data.limit;
    }
}
/**
 * 添加修改表单相关
@@ -41,126 +41,127 @@
const showSearch = ref(true);
const title = ref("");
const data = reactive({
   //表单
   form: {
      dictName:'',
      dictType:'',
        remark:'',
   },
    //表单
    form: {
        dictName: '',
        dictType: '',
        remark: '',
    },

   //查询数据
   search: {
      page: 1, //当前页
      limit: 10, //每页条数
      dictName: '',
      status: ''
   },
   //表单验证
   rules: {
      dictName: [{ required: true, message: "请输入字典名称", trigger: "blur" }],
      dictType: [{ required: true, message: "请输入字典类型", trigger: "blur" }],
   },
    //查询数据
    search: {
        page: 1, //当前页
        limit: 10, //每页条数
        dictName: '',
        status: ''
    },
    //表单验证
    rules: {
        dictName: [{required: true, message: "请输入字典名称", trigger: "blur"}],
        dictType: [{required: true, message: "请输入字典类型", trigger: "blur"}],
    },
});
const { search, form, rules } = toRefs(data);
/** 
 * 提交添加修改表单按钮 
const {search, form, rules} = toRefs(data);

/**
 * 提交添加修改表单按钮
 */
function submitForm() {
  
  proxy.$refs["postRef"].validate(async valid => {
     if (valid) {
        if(!form.value.id){
           let res = await sysDictType().create(form.value)
           if(res.code == 200) {
              proxy.$modal.msgSuccess("添加成功")
              openForm.value = false
              getList()
              reset()
           }else{
               proxy.$modal.msgError("添加失败")
               openForm.value = false
               reset()
           }
        }else{
            let res = await sysDictType().modify(form.value)
            if(res.code == 200) {
              proxy.$modal.msgSuccess("修改成功")
              openForm.value = false
              getList()
              reset()
           }else{
               proxy.$modal.msgError("修改失败")
               openForm.value = false
               reset()
           }

    proxy.$refs["postRef"].validate(async valid => {
        if (valid) {
            if (!form.value.id) {
                let res = await sysDictType().create(form.value)
                if (res.code == 200) {
                    proxy.$modal.msgSuccess("添加成功")
                    openForm.value = false
                    getList()
                    reset()
                } else {
                    proxy.$modal.msgError("添加失败")
                    openForm.value = false
                    reset()
                }
            } else {
                let res = await sysDictType().modify(form.value)
                if (res.code == 200) {
                    proxy.$modal.msgSuccess("修改成功")
                    openForm.value = false
                    getList()
                    reset()
                } else {
                    proxy.$modal.msgError("修改失败")
                    openForm.value = false
                    reset()
                }
            }
        }
     }
  });
    });
}

/**
 * 字典类型操作相关
 */

/** 搜索按钮操作 */
function handleQuery() {
   getList({keywords:search.value.dictName,page:1});
    getList({keywords: search.value.dictName, page: 1});
}

/** 重置按钮操作 */
function resetQuery() {
   proxy.resetForm("queryRef");
   handleQuery();
    proxy.resetForm("queryRef");
    handleQuery();
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
   ids.value = selection.map(item => item.id);
   single.value = selection.length != 1;
   multiple.value = !selection.length;
    ids.value = selection.map(item => item.id);
    single.value = selection.length != 1;
    multiple.value = !selection.length;
}

/** 新增按钮操作 */
function handleAdd() {
   reset();
   openForm.value = true;
   title.value = "添加字典";
    reset();
    openForm.value = true;
    title.value = "添加字典";
}

/** 修改按钮操作 */
function handleUpdate(row) {
   reset();
   //将表单数据更新为table对应值
   Object.keys(row).forEach(key => {  
      if (form.value.hasOwnProperty(key)) {  
         form.value[key] = row[key];  
      }  
   });
   form.value.id = row.id
   console.log('form',form.value);
   openForm.value = true;
   title.value = "修改字典";
    reset();
    //将表单数据更新为table对应值
    Object.keys(row).forEach(key => {
        if (form.value.hasOwnProperty(key)) {
            form.value[key] = row[key];
        }
    });
    form.value.id = row.id
    console.log('form', form.value);
    openForm.value = true;
    title.value = "修改字典";
}

/** 删除按钮操作 */
function handleDelete(row) {
   proxy.$modal.confirm('确认删除"' + row.dictName +'？')
   .then(async() => {
      console.log("无删除功能");
      // let res = await areaApi().remove(row.id)
      // if(res.code == 200) {
      //    proxy.$modal.msgSuccess("删除成功");
      //    openForm.value = false
      //    getList()
      // }
   }).catch(() => {});
    proxy.$modal.confirm('确认删除"' + row.dictName + '？')
        .then(async () => {
            console.log("无删除功能");
        }).catch(() => {
    });
}

/** 关闭弹窗 */
function cancel() {
   openForm.value = false;
   reset();
    openForm.value = false;
    reset();
}

/** 表单重置 */
const reset = () => {
   proxy.resetForm("postRef");
   openForm.value = false
    proxy.resetForm("postRef");
    openForm.value = false
}

/**
@@ -171,126 +172,129 @@
//判断
const isHandle = ref(false)
//table
const tableDictData = ref([]); 
let  tableDataHeader = ref({
      dictType: '字典类型',
      dictValue: '字典键值',
      dictLabel: '字典描述',
      remark:'备注',
   })
const tableDictData = ref([]);
let tableDataHeader = ref({
    dictType: '字典类型',
    dictValue: '字典键值',
    dictLabel: '字典描述',
    remark: '备注',
})
//获取列表
const getDataList = async(val) => {
   console.log('val',val);
   loading.value = true;
   let res = await sysDictData().searchType(val)
   if(res.code == 200) {
         loading.value = false;
         tableDictData.value = res.data;
   }
const getDataList = async (val) => {
    console.log('val', val);
    loading.value = true;
    let res = await sysDictData().searchType(val)
    if (res.code == 200) {
        loading.value = false;
        tableDictData.value = res.data;
    }
}
const postDataRef = ref()
   //表单
//表单
const dataForm = ref({
   dictLabel:'',
   dictValue:'',
   dictType:'',
      remark:''
    dictLabel: '',
    dictValue: '',
    dictType: '',
    remark: ''
})
const dataRules = ref({
   dictLabel: [{ required: true, message: "请输入字典描述", trigger: "blur" }],
   dictValue: [{ required: true, message: "请输入字典键值", trigger: "blur" }],
    dictLabel: [{required: true, message: "请输入字典描述", trigger: "blur"}],
    dictValue: [{required: true, message: "请输入字典键值", trigger: "blur"}],
})
//提交
const handleData = () =>{
   
  proxy.$refs["postDataRef"].validate(async valid => {
     if (valid) {
        if(!dataForm.value.id){
           let res = await sysDictData().create(dataForm.value)
           if(res.code == 200) {
              proxy.$modal.msgSuccess("添加成功")
              isHandle.value = false
              getDataList(dataForm.value.dictType)
              proxy.resetForm("postDataRef");
           }else{
               proxy.$modal.msgError("添加失败")
              isHandle.value = false
              proxy.resetForm("postDataRef");
           }
        }else{
            let res = await sysDictData().modify(dataForm.value)
            if(res.code == 200) {
              proxy.$modal.msgSuccess("修改成功")
              isHandle.value = false
              getDataList(dataForm.value.dictType)
              proxy.resetForm("postDataRef");
              
           }else{
               proxy.$modal.msgError("修改失败")
              isHandle.value = false
              proxy.resetForm("postDataRef");
           }
const handleData = () => {

    proxy.$refs["postDataRef"].validate(async valid => {
        if (valid) {
            if (!dataForm.value.id) {
                let res = await sysDictData().create(dataForm.value)
                if (res.code == 200) {
                    proxy.$modal.msgSuccess("添加成功")
                    isHandle.value = false
                    getDataList(dataForm.value.dictType)
                    proxy.resetForm("postDataRef");
                } else {
                    proxy.$modal.msgError("添加失败")
                    isHandle.value = false
                    proxy.resetForm("postDataRef");
                }
            } else {
                let res = await sysDictData().modify(dataForm.value)
                if (res.code == 200) {
                    proxy.$modal.msgSuccess("修改成功")
                    isHandle.value = false
                    getDataList(dataForm.value.dictType)
                    proxy.resetForm("postDataRef");

                } else {
                    proxy.$modal.msgError("修改失败")
                    isHandle.value = false
                    proxy.resetForm("postDataRef");
                }
            }
        }
     }
  });
    });
}
//取消
const cancelData = () =>{
   isHandle.value = false
   proxy.resetForm("postDataRef");
const cancelData = () => {
    isHandle.value = false
    proxy.resetForm("postDataRef");
}
//查看按钮相关
const handleDetail = (row) =>{
   getDataList(row.dictType)
   openDataForm.value = true
   console.log('form',dataForm.value);
   dataForm.value.dictType = row.dictType
   isHandle.value = false
const handleDetail = (row) => {
    getDataList(row.dictType)
    openDataForm.value = true
    console.log('form', dataForm.value);
    dataForm.value.dictType = row.dictType
    isHandle.value = false
}
//关闭按钮相关
const close = () =>{
   openDataForm.value = false
   proxy.resetForm('postDataRef')
   isHandle.value = false
const close = () => {
    openDataForm.value = false
    proxy.resetForm('postDataRef')
    isHandle.value = false
}
// 新增 

// 新增
function handleAddData() {
   let type = dataForm.value.dictType
   proxy.resetForm("postDataRef");
   dataForm.value.dictType = type
   console.log('form1',dataForm.value);
   isHandle.value = true
   if(dataForm.value.id){
      delete dataForm.value.id
   }
    let type = dataForm.value.dictType
    proxy.resetForm("postDataRef");
    dataForm.value.dictType = type
    console.log('form1', dataForm.value);
    isHandle.value = true
    if (dataForm.value.id) {
        delete dataForm.value.id
    }
}

/** 修改 */
async function handleUpdateData(row) {
   //将表单数据更新为table对应值
   Object.keys(row).forEach(key => {  
      if (dataForm.value.hasOwnProperty(key)) {  
         dataForm.value[key] = row[key];  
      }  
   });
   dataForm.value.id = row.id 
   isHandle.value = true
    //将表单数据更新为table对应值
    Object.keys(row).forEach(key => {
        if (dataForm.value.hasOwnProperty(key)) {
            dataForm.value[key] = row[key];
        }
    });
    dataForm.value.id = row.id
    isHandle.value = true
}

/** 删除 */
function handleDeleteData(row) {
   proxy.$modal.confirm('确认删除"' + row.dictValue +'？')
   .then(async() => {
      let res = await sysDictData().remove(row.id)
      if(res.code == 200) {
         proxy.$modal.msgSuccess("删除成功");
         getDataList(row.dictType)
      }
   }).catch(() => {});
    proxy.$modal.confirm('确认删除"' + row.dictValue + '？')
        .then(async () => {
            let res = await sysDictData().remove(row.id)
            if (res.code == 200) {
                proxy.$modal.msgSuccess("删除成功");
                getDataList(row.dictType)
            }
        }).catch(() => {
    });
}
onMounted(async()=>{
   
   getList();

onMounted(async () => {

    getList();
})


@@ -300,153 +304,162 @@
        <!--搜索框-->
        <el-form :model="search" ref="queryRef" :inline="true" v-show="showSearch">
            <el-form-item label="" prop="dictName">
               <el-input
                  v-model="search.dictName"
                  placeholder="请输入管点名称或编号"
                  clearable
                  style="width: 200px"
                  @keyup.enter="handleQuery"
               />
                <el-input
                    v-model="search.dictName"
                    placeholder="请输入管点名称或编号"
                    clearable
                    style="width: 200px"
                    @keyup.enter="handleQuery"
                />
            </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
            <el-button icon="Refresh" @click="resetQuery">重置</el-button>
          
          </el-form-item>
            <el-form-item>
                <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                <el-button icon="Refresh" @click="resetQuery">重置</el-button>

            </el-form-item>
        </el-form>
        <!--操作按钮列-->
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
             <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAdd"
             >新增</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
            <el-col :span="1.5">
                <el-button
                    type="primary"
                    plain
                    icon="Plus"
                    @click="handleAdd"
                >新增
                </el-button>
            </el-col>
            <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>

        <!--表格及分页-->
        <el-table v-loading="loading" :data="tableData" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="55" align ="center" />
          <el-table-column
            v-for="(item, key, index) of tableHeader"
            :prop="key.toString()"
            :label="item"
            :key="index"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
                <el-button link type="primary" icon="Edit" @click="handleDetail(scope.row)">查看字典数据</el-button>
                <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
             </template>
          </el-table-column>
            <el-table-column type="selection" width="55" align="center"/>
            <el-table-column
                v-for="(item, key, index) of tableHeader"
                :prop="key.toString()"
                :label="item"
                :key="index"
                align="center"
            ></el-table-column>
            <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
                <template #default="scope">
                    <el-button link type="primary" icon="Edit" @click="handleDetail(scope.row)">查看字典数据</el-button>
                    <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)">修改</el-button>
                    <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="search.page"
          v-model:limit="search.limit"
          @pagination="getList"
            v-show="total > 0"
            :total="total"
            v-model:page="search.page"
            v-model:limit="search.limit"
            @pagination="getList"
        />

        <!-- 添加/修改弹窗 -->
        <el-dialog :title="title" v-model="openForm" width="45vw" center append-to-body>
          <el-form class="form-box" ref="postRef" :model="form" :rules="rules">
            <el-form-item label="字典名称" prop="dictName">
                <el-input v-model="form.dictName" placeholder="请输入字典名称" />
             </el-form-item>
             <el-form-item label="字典类型" prop="dictType">
                <el-input v-model="form.dictType" placeholder="请输入字典类型" />
             </el-form-item>
             <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
             </el-form-item>
              <el-form-item></el-form-item>
          </el-form>
          <template #footer>
             <div class="dialog-footer">
                <el-button type="primary" @click="submitForm">确 定</el-button>
                <el-button @click="cancel">取 消</el-button>
             </div>
          </template>
            <el-form class="form-box" ref="postRef" :model="form" :rules="rules">
                <el-form-item label="字典名称" prop="dictName">
                    <el-input v-model="form.dictName" placeholder="请输入字典名称"/>
                </el-form-item>
                <el-form-item label="字典类型" prop="dictType">
                    <el-input v-model="form.dictType" placeholder="请输入字典类型"/>
                </el-form-item>
                <el-form-item label="备注" prop="remark">
                    <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"/>
                </el-form-item>
                <el-form-item></el-form-item>
            </el-form>
            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="submitForm">确 定</el-button>
                    <el-button @click="cancel">取 消</el-button>
                </div>
            </template>
        </el-dialog>

        <!-- 字典数据弹窗 -->
        <el-dialog title="字典数据" v-model="openDataForm" width="50vw" center append-to-body>
        <!--操作按钮列-->
        <el-row>
          <el-col>
             <el-button
                type="primary"
                plain
                icon="Plus"
                @click="handleAddData"
             >新增</el-button>
          </el-col>
        </el-row>
         <!--表格-->
        <el-table v-loading="loading" :data="tableDictData">
          <el-table-column
            v-for="(item, key, index) of tableDataHeader"
            :prop="key.toString()"
            :label="item"
            :key="index"
            align="center"
            
          >
         </el-table-column>
          <el-table-column label="操作" width="180" align="center" class-name="small-padding fixed-width">
             <template #default="scope">
                <el-button link :type="dataForm.dictValue == scope.row.dictValue ? 'warning' : 'primary'"  icon="Edit" @click="handleUpdateData(scope.row)">修改</el-button>
                <el-button link type="primary" icon="Delete" @click="handleDeleteData(scope.row)">删除</el-button>
             </template>
          </el-table-column>
        </el-table>
        <el-form title="添加数据" v-show="isHandle" class="dataForm-box" ref="postDataRef" :rules="dataRules" :model="dataForm" inline label-width="100px">
            <el-form-item prop="dictType">
               <span>{{ dataForm.dictType }}</span>
            </el-form-item>
            <el-form-item prop="dictValue">
               <el-input v-model="dataForm.dictValue" placeholder="请输入字典键值"></el-input>
            </el-form-item>
            <el-form-item prop="dictLabel">
               <el-input v-model="dataForm.dictLabel" placeholder="请输入字典描述"></el-input>
            </el-form-item>
            <el-form-item prop="remark">
               <el-input v-model="dataForm.remark" placeholder="请输入备注"></el-input>
            </el-form-item>
            <el-form-item>
               <el-button type="primary" @click="handleData">确 认</el-button>
               <el-button @click="cancelData">取 消</el-button>
            </el-form-item>
        </el-form>
        
        <template #footer>
             <div class="dialog-footer">
                <el-button @click="close">关 闭</el-button>
             </div>
          </template>
      </el-dialog>
            <!--操作按钮列-->
            <el-row>
                <el-col>
                    <el-button
                        type="primary"
                        plain
                        icon="Plus"
                        @click="handleAddData"
                    >新增
                    </el-button>
                </el-col>
            </el-row>
            <!--表格-->
            <el-table v-loading="loading" :data="tableDictData">
                <el-table-column
                    v-for="(item, key, index) of tableDataHeader"
                    :prop="key.toString()"
                    :label="item"
                    :key="index"
                    align="center"

                >
                </el-table-column>
                <el-table-column label="操作" width="auto" align="center" class-name="small-padding fixed-width">
                    <template #default="scope">
                        <el-button link :type="dataForm.dictValue == scope.row.dictValue ? 'warning' : 'primary'"
                                   icon="Edit" @click="handleUpdateData(scope.row)">修改
                        </el-button>
                        <el-button link type="primary" icon="Delete" @click="handleDeleteData(scope.row)">删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-form title="添加数据" v-show="isHandle" class="dataForm-box" ref="postDataRef" :rules="dataRules"
                     :model="dataForm" inline label-width="6.25rem">
                <el-form-item prop="dictType">
                    <span>{{ dataForm.dictType }}</span>
                </el-form-item>
                <el-form-item prop="dictValue">
                    <el-input v-model="dataForm.dictValue" placeholder="请输入字典键值"></el-input>
                </el-form-item>
                <el-form-item prop="dictLabel">
                    <el-input v-model="dataForm.dictLabel" placeholder="请输入字典描述"></el-input>
                </el-form-item>
                <el-form-item prop="remark">
                    <el-input v-model="dataForm.remark" placeholder="请输入备注"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="handleData">确 认</el-button>
                    <el-button @click="cancelData">取 消</el-button>
                </el-form-item>
            </el-form>

            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="close">关 闭</el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>
<style scoped lang="scss">
.dataForm-box{
   background-color: #ffffff;
   display:flex;
   .el-form-item{
      width: 18%;
      margin: 10px 1%;
      span{
         margin: 0 auto;
         // font-weight: 600;
      }
   }
.dataForm-box {
    background-color: #ffffff;
    display: flex;

    .el-form-item {
        width: 18%;
        margin: 10px 1%;

        span {
            margin: 0 auto;
            // font-weight: 600;
        }
    }
}
.focus{
   color: aqua;

.focus {
    color: aqua;
}
</style>