flex small tips2

部署运行你感兴趣的模型镜像

在flex里注释mxml标签的快捷键:Ctrl+Shift+C

注释AS的快捷键是 Ctrl+/

    navigateToURL(new URLRequest("javascript:location.reload();"),"_self")

     navigateToURL(new URLRequest("javascript:window.close()"),"_self");

     navigateToURL(new URLRequest('http://ntt.cc'), '_blank');

    System.setClipboard(strContent);

   System.totalMemory * 0.000000954

   System.gc()

.复制一个ArrayCollection

  //dummy solution( well, it works )
  var bar:ArrayCollection = new ArrayCollection();
  for each ( var i:Object in ac ){
  bar.addItem( i );
  }


      var bar:ArrayCollction=new ArrayArrayCollction(ac.source);

  // fantastic !
  var bar:ListCollectionView = new ListCollectionView( ListCollectionView( ac ).list );


   获取数据类型  getQualifiedClassName(data)

   i is int   int 与NUmber还是不一样的

       清除子串左侧空格  StringUtil.trim()

  public function LTrim(s : String):String{
  var i : Number = 0;
  while(s.charCodeAt(i) == 32 || s.charCodeAt(i) == 13 || s.charCodeAt(i) == 10 || s.charCodeAt(i) == 9)  {  i++;  }
  return s.substring(i,s.length);
  }
 
public function RTrim(s : String):String{
  var i : Number = s.length - 1;
  while(s.charCodeAt(i) == 32 || s.charCodeAt(i) == 13 || s.charCodeAt(i) == 10 ||s.charCodeAt(i) == 9)  {  i--;  }
  return s.substring(0,i+1);
  }
public function Trim(s : String):String{
  return LTrim(RTrim(s));
}

设置Alert 窗口的背景为透明
  Alert{
  modalTransparency:0.0;
  modalTransparencyBlur:0;}

<mx:Style>
Alert{ font-size: 12}
</mx:Style>

<mx:Style>
Alert {
titleStyleName: "alertTitle";
messageStyleName: "alertMessage";
buttonStyleName: "alertButton";
}

.alertTitle {
letterSpacing: 0;//各字符之间显示的附加像素数
fontSize: 18;
fontWeight: normal;//bold 加粗, normal 正常
color: red;
textAlign: left;//文本对齐方式center,justify,left,right
}
</mx:Style>


xml的NameSpace
var xml:XML = <root>
    <h:table xmlns:h="http://www.w3.org/TR/html4/">
      <h:tr>
        <h:td>Apples</h:td>
        <h:td>Bananas</h:td>
      </h:tr>
    </h:table>
 
    <f:table xmlns:f="http://www.w3schools.com/furniture">
      <f:name>African Coffee Table</f:name>
      <f:width>80</f:width>
      <f:length>120</f:length>
    </f:table>
 
</root>
 
trace("Not using a namespace");
trace(xml.table); // Nothing
 
var trNs:Namespace = new Namespace("http://www.w3.org/TR/html4/");
var furnitureNs:Namespace = new Namespace("http://www.w3schools.com/furniture");
 
trace("Using a namespace");
trace(xml.trNs::table);
trace(xml.furnitureNs::table);
 
 
// You can also set the default xml namespace if you are repeatedly using the same namespace.
default xml namespace = new Namespace("http://www.w3.org/TR/html4/");
//trace("Using a namespace");
//trace(xml.table);  


获取取随机颜色 0xffffff*Math.random() 

生成随机字符串.
  private function GenerateCheckCode():String  {

  //init
  var ran:Number;
  var number:Number;
  var code:String;
  var checkCode:String ="";
  //get 4 radom
  for(var i:int=0; i< 4; i++){
  ran=Math.random();
  number =Math.round(ran*10000); //get result like 0.1234
  if(number % 2 == 0)
  code = String.fromCharCode(48+(number % 10)); //0's ASCII code is 48
  else
  code = String.fromCharCode(65+(number % 26)) ; // A's ASCII code is 65
  checkCode += code;
  }
  return checkCode;

  }


在Flex里的Image组件,默认加载的内容是按等比缩放的,如果希望所加载的内容填充满整个Image内容,则应该设置其属性 maintainAspectRatio=false(默认值为true);


您可能感兴趣的与本文相关的镜像

Stable-Diffusion-3.5

Stable-Diffusion-3.5

图片生成
Stable-Diffusion

Stable Diffusion 3.5 (SD 3.5) 是由 Stability AI 推出的新一代文本到图像生成模型,相比 3.0 版本,它提升了图像质量、运行速度和硬件效率

如下述代码1,是一个弹窗的代码页面(如图1所示),调整一下左侧的"SQL查询",当分辨率高变形的有点厉害了,请参照代码2中的样式所示,请优化"SQL查询"的样式,并完整的写出修改后的代码(不改变代码1中的功能,即"sql查询"框中能够输入sql语句不变) ### 代码1:src\views\handle\dataset\add\AddView.vue ```vue <template> <div class="sql-dataset-container"> <el-container class="layout-container"> <!-- 右侧SQL配置表单 --> <el-aside width="40%" class="config-aside"> <div class="config-section"> <div class="section-header"> <h2><el-icon><setting /></el-icon> SQL数据集配置</h2> </div> <el-form :model="form" :rules="rules" label-position="top" class="config-form" ref="formRef" > <!-- 数据集名称 - 修改为行内布局 --> <el-form-item v-if="props.id===''" label="数据集名称" prop="name" class="form-item-card inline-form-item"> <el-input v-model="form.name" placeholder="例如: 用户行为分析数据集" size="large" :prefix-icon="Document" /> </el-form-item> <!-- SQL编辑器 --> <el-form-item label="SQL查询" prop="sql" class="form-item-card sql-editor-item"> <div class="sql-editor-container"> <VAceEditor v-model:value="form.sql" lang="sql" theme="github" style="height: 300px; width: 100%" :options="{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, highlightActiveLine: true, showLineNumbers: true, tabSize: 2, }" /> <div class="sql-tips"> <el-tag type="info" size="small"> <el-icon><info-filled /></el-icon> 提示: 请确保SQL语法正确且符合数据源规范 </el-tag> </div> </div> </el-form-item> </el-form> </div> </el-aside> <!-- 左侧数据预览 --> <el-main class="preview-main"> <div class="preview-section"> <div class="section-header"> <div class="header-left"> <h2><el-icon><data-line /></el-icon> 数据预览</h2> </div> <div class="header-right"> <el-button type="warning" plain size="small" @click="emit('cancel')" :icon="Close">取消</el-button> <el-button type="success" plain size="small" :disabled="!form.sql" @click="fetchPreviewData" :icon="Refresh">执行SQL预览</el-button> <el-button type="primary" plain size="small" @click="handleSave" :icon="Check">保存</el-button> </div> </div> <div class="preview-content"> <zr-table :tableModule="tableModule" /> </div> </div> </el-main> </el-container> </div> </template> <script setup> import {ref, reactive, onMounted, getCurrentInstance} from 'vue' import { VAceEditor } from 'vue3-ace-editor' import '@/components/CodeEdit/ace-config.js' import { Setting, DataLine, Document, Refresh, Check, Close, InfoFilled, Edit, Download } from '@element-plus/icons-vue' import ZrTable from "@/components/ZrTable/index.vue"; import {buildFilterSos} from "@/components/ZrTable/table.js"; import { handleDataSetCreate, handleDataSetGet, handleDataSetPreviewData, handleDataSetReconstruct } from "@/api/handle/dataset.js"; const { proxy } = getCurrentInstance() const props = defineProps({ sceneId:{ type: String, default: '', }, id:{ type: String, default: '', } }) const emit = defineEmits(['saved', 'cancel']) const form = ref({ id:props.id, name: '', sceneId:props.sceneId, type:'view', sql: '', info:'', }) //数据预览 const columnsData= ref([]) const queryData = ref([]) const state = reactive({ columns: columnsData, // 表格配置 query: queryData, // 查询条件配置 queryForm: {}, // 查询form表单 loading: false, // 加载状态 dataList: [], // 列表数据 pages:false, }) const { loading, dataList, columns, pages, query, queryForm } = toRefs(state) const formRef = ref(null) // 预览数据 // 传给子组件的 const tableModule = ref({ callback: fetchPreviewData, // 回调,子组件中可以看到很多调用callback的,这里对应的是获取列表数据的方法 // 以下不说了,上面都给解释了 queryForm, columns, dataList, loading, pages, query, }) const rules = reactive({ name: [ { required: true, message: '请输入数据集名称', trigger: 'blur' }, { max: 50, message: '名称长度不能超过50个字符', trigger: 'blur' } ], sql: [ { required: true, message: '请输入SQL查询语句', trigger: 'blur' }, { validator: (rule, value, callback) => { if (!value || !value.trim()) { callback(new Error('SQL不能为空')) } else if (!value.toLowerCase().includes('select')) { callback(new Error('SQL必须是SELECT查询语句')) } else { callback() } }, trigger: 'blur' } ] }) async function fetchPreviewData() { state.loading = true const valid = await formRef.value.validate() if (!valid) { proxy.$modal.msgError("校验错误,请修改好再次执行") return } // 掉自己的接口,切勿复制粘贴 handleDataSetPreviewData({ sql:form.value.sql }).then((res) => { if (res.success) { if(res.data.pageData.length>0){ for (let key in res.data.pageData[0]) { columnsData.value.push({prop: key, label:key, align: 'center',show:1}) } } state.dataList = res.data.pageData proxy.$modal.msgSuccess('SQL执行成功') } else { proxy.$modal.msgError(res.message) } }) state.loading = false } const handleSave = async () => { const valid = await formRef.value.validate() if (!valid) return form.value.info=JSON.stringify({ sql:form.value.sql }) const method=form.value.id===""?handleDataSetCreate:handleDataSetReconstruct method(form.value).then((res) => { if (res.success) { emit('saved',{id: res.data }) } else { proxy.$modal.msgError(res.message) } }) } watch(() => props.id, (newid, oldid) => { if (newid !== oldid && newid!=="") { // 引用变化时触发 handleDataSetGet(newid).then((res) => { if(res.success){ form.value.sql=JSON.parse(res.data.info)?.sql; } }) } }, { immediate: true } // 注意:不要用 deep: true ); </script> <style scoped lang="scss"> .sql-dataset-container { height: calc(90vh - 60px); padding: 20px; background-color: #f5f7fa; } .layout-container { height: 100%; background: #fff; border-radius: 12px; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; } .config-aside { background: #f9fafc; border-right: 1px solid var(--el-border-color-light); padding: 24px; display: flex; flex-direction: column; } .preview-main { padding: 24px; background: #fff; display: flex; flex-direction: column; } .section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; h2 { margin: 0; color: var(--el-text-color-primary); font-weight: 600; font-size: 18px; display: flex; align-items: center; gap: 8px; } .header-left, .header-right { display: flex; align-items: center; } } .preview-content { flex: 1; border: 1px solid var(--el-border-color-light); border-radius: 8px; overflow: hidden; display: flex; flex-direction: column; } .config-form { flex: 1; display: flex; flex-direction: column; :deep(.el-form-item) { margin-bottom: 20px; &.inline-form-item { :deep(.el-form-item__label) { display: inline-flex; align-items: center; width: auto; margin-right: 12px; padding-bottom: 0; } :deep(.el-form-item__content) { display: inline-flex; flex: 1; } } .el-form-item__label { font-weight: 500; padding-bottom: 8px; color: var(--el-text-color-regular); font-size: 14px; } } } .form-item-card { background: #fff; padding: 16px; border-radius: 8px; border-left: 3px solid var(--el-color-primary); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05); } .sql-editor-item { flex: 1; display: flex; flex-direction: column; :deep(.el-form-item__content) { flex: 1; display: flex; flex-direction: column; } } .sql-editor-container { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--el-border-color-light); border-radius: 4px; overflow: hidden; } .sql-tips { padding: 8px 12px; background: var(--el-color-info-light-9); border-top: 1px solid var(--el-border-color-light); .el-tag { width: 100%; justify-content: flex-start; .el-icon { margin-right: 6px; } } } .form-actions { margin-top: 24px; padding-top: 16px; display: flex; justify-content: flex-end; gap: 16px; border-top: 1px dashed var(--el-border-color); } .refresh-btn { :deep(.el-icon) { margin-right: 6px; } } @media (max-width: 992px) { .layout-container { flex-direction: column; } .config-aside { width: 100% !important; border-right: none; border-bottom: 1px solid var(--el-border-color-light); } } </style> ``` ### 代码2:src\views\handle\dataset\add\AddView.vue ```vue <template> <div class="sql-dataset-container"> <el-container class="layout-container"> <!-- 左侧:数据集名称和SQL查询 --> <el-aside class="config-aside"> <div class="config-section"> <div class="section-header"> <h2><el-icon><setting /></el-icon> SQL数据集配置</h2> </div> <el-form :model="form" :rules="rules" label-position="top" class="config-form" ref="formRef" > <!-- 数据集名称 --> <el-form-item v-if="props.id === ''" label="数据集名称" prop="name" class="form-item-card inline-form-item"> <el-input v-model="form.name" placeholder="例如: 用户行为分析数据集" size="large" :prefix-icon="Document" /> </el-form-item> <!-- SQL编辑器 --> <el-form-item label="SQL查询" prop="sql" class="form-item-card sql-editor-item"> <div class="sql-editor-container"> <VAceEditor v-model:value="form.sql" lang="sql" theme="github" style="height: 100%; width: 100%" :options="{ enableBasicAutocompletion: true, enableLiveAutocompletion: true, highlightActiveLine: true, showLineNumbers: true, tabSize: 2, }" /> <div class="sql-tips"> <el-tag type="info" size="small"> <el-icon><info-filled /></el-icon> 提示: 请确保SQL语法正确且符合数据源规范 </el-tag> </div> </div> </el-form-item> </el-form> </div> </el-aside> <!-- 右侧:数据预览 --> <el-main class="preview-main"> <div class="preview-section"> <div class="section-header"> <div class="header-left"> <h2><el-icon><data-line /></el-icon> 数据预览</h2> </div> <div class="header-right"> <el-button type="warning" plain size="small" @click="emit('cancel')" :icon="Close">取消</el-button> <el-button type="success" plain size="small" :disabled="!form.sql" @click="fetchPreviewData" :icon="Refresh">执行SQL预览</el-button> <el-button type="primary" plain size="small" @click="handleSave" :icon="Check">保存</el-button> </div> </div> <div class="preview-content"> <zr-table :tableModule="tableModule" /> </div> </div> </el-main> </el-container> </div> </template> <script setup> import {ref, reactive, onMounted, getCurrentInstance, watch} from 'vue' import { VAceEditor } from 'vue3-ace-editor' import '@/components/CodeEdit/ace-config.js' import { Setting, DataLine, Document, Refresh, Check, Close, InfoFilled, Edit, Download } from '@element-plus/icons-vue' import ZrTable from "@/components/ZrTable/index.vue"; import {buildFilterSos} from "@/components/ZrTable/table.js"; import { handleDataSetCreate, handleDataSetGet, handleDataSetPreviewData, handleDataSetReconstruct } from "@/api/handle/dataset.js"; const { proxy } = getCurrentInstance() const props = defineProps({ sceneId:{ type: String, default: '', }, id:{ type: String, default: '', } }) const emit = defineEmits(['saved', 'cancel']) const form = ref({ id:props.id, name: '', sceneId:props.sceneId, type:'view', sql: '', info:'', }) //数据预览 const columnsData= ref([]) const queryData = ref([]) const state = reactive({ columns: columnsData, // 表格配置 query: queryData, // 查询条件配置 queryForm: {}, // 查询form表单 loading: false, // 加载状态 dataList: [], // 列表数据 pages:false, }) const { loading, dataList, columns, pages, query, queryForm } = toRefs(state) const formRef = ref(null) // 预览数据 // 传给子组件的 const tableModule = ref({ callback: fetchPreviewData, // 回调,子组件中可以看到很多调用callback的,这里对应的是获取列表数据的方法 // 以下不说了,上面都给解释了 queryForm, columns, dataList, loading, pages, query, }) const rules = reactive({ name: [ { required: true, message: '请输入数据集名称', trigger: 'blur' }, { max: 50, message: '名称长度不能超过50个字符', trigger: 'blur' } ], sql: [ { required: true, message: '请输入SQL查询语句', trigger: 'blur' }, { validator: (rule, value, callback) => { if (!value || !value.trim()) { callback(new Error('SQL不能为空')) } else if (!value.toLowerCase().includes('select')) { callback(new Error('SQL必须是SELECT查询语句')) } else { callback() } }, trigger: 'blur' } ] }) async function fetchPreviewData() { state.loading = true const valid = await formRef.value.validate() if (!valid) { proxy.$modal.msgError("校验错误,请修改好再次执行") return } // 掉自己的接口,切勿复制粘贴 handleDataSetPreviewData({ sql:form.value.sql }).then((res) => { if (res.success) { columnsData.value = []; // 重置列数据 if(res.data.pageData.length>0){ for (let key in res.data.pageData[0]) { columnsData.value.push({prop: key, label:key, align: 'center',show:1}) } } state.dataList = res.data.pageData proxy.$modal.msgSuccess('SQL执行成功') } else { proxy.$modal.msgError(res.message) } }) state.loading = false } const handleSave = async () => { const valid = await formRef.value.validate() if (!valid) return form.value.info=JSON.stringify({ sql:form.value.sql }) const method=form.value.id===""?handleDataSetCreate:handleDataSetReconstruct method(form.value).then((res) => { if (res.success) { emit('saved',{id: res.data }) } else { proxy.$modal.msgError(res.message) } }) } watch(() => props.id, (newid, oldid) => { if (newid !== oldid && newid!=="") { // 引用变化时触发 handleDataSetGet(newid).then((res) => { if(res.success){ form.value.sql=JSON.parse(res.data.info)?.sql; } }) } }, { immediate: true } // 注意:不要用 deep: true ); </script> <style scoped lang="scss"> .sql-dataset-container { height: calc(90vh - 60px); padding: 16px; background-color: #f5f7fa; } .layout-container { height: 100%; background: #fff; border-radius: 8px; box-shadow: 0 1px 6px rgba(0, 0, 0, 0.05); overflow: hidden; display: flex; /* 使用flex横向布局 */ flex-direction: row; /* 横向排列 */ } .config-aside { background: #f9fafc; border-right: 1px solid var(--el-border-color-light); /* 右侧边框分隔 */ padding: 18px; display: flex; flex-direction: column; width: 50%; /* 左侧占50%宽度 */ min-width: 300px; /* 最小宽度限制 */ } .preview-main { padding: 18px; background: #fff; display: flex; flex-direction: column; flex: 1; /* 右侧占剩余宽度 */ min-width: 300px; /* 最小宽度限制 */ } .section-header { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin-bottom: 16px; gap: 12px; h2 { margin: 0; color: var(--el-text-color-primary); font-weight: 600; font-size: 16px; display: flex; align-items: center; gap: 6px; white-space: nowrap; } } .preview-content { flex: 1; border: 1px solid var(--el-border-color-light); border-radius: 6px; overflow: hidden; display: flex; flex-direction: column; min-height: 250px; } .config-form { flex: 1; display: flex; flex-direction: column; :deep(.el-form-item) { margin-bottom: 16px; } } .form-item-card { background: #fff; padding: 12px; border-radius: 6px; border-left: 2px solid var(--el-color-primary); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.03); } .sql-editor-container { flex: 1; display: flex; flex-direction: column; border: 1px solid var(--el-border-color-light); border-radius: 4px; overflow: hidden; min-height: 220px; max-height: 400px; } .sql-tips { padding: 6px 10px; background: var(--el-color-info-light-9); border-top: 1px solid var(--el-border-color-light); .el-tag { width: 100%; justify-content: flex-start; font-size: 11px; padding: 4px 8px; } } /* 响应式调整 */ @media (max-width: 992px) { .layout-container { flex-direction: column; /* 小屏幕下改为纵向布局 */ } .config-aside, .preview-main { width: 100%; /* 占满宽度 */ min-width: auto; /* 取消最小宽度限制 */ } .config-aside { border-right: none; border-bottom: 1px solid var(--el-border-color-light); /* 底部边框分隔 */ max-height: 50%; /* 限制最大高度 */ } .sql-dataset-container { padding: 12px; height: auto; min-height: 100vh; } .section-header { flex-direction: column; align-items: stretch; .header-left, .header-right { width: 100%; } .header-right { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 8px; } } .sql-editor-container { max-height: 250px; min-height: 180px; } } @media (max-width: 768px) { .preview-content { min-height: 200px; } .section-header { gap: 8px; h2 { font-size: 15px; } } .header-right { grid-template-columns: repeat(2, 1fr) !important; .el-button { width: 100%; margin: 0 !important; } .el-button:last-child { grid-column: span 2; } } } @media (max-width: 480px) { .sql-dataset-container { padding: 8px; } .config-aside, .preview-main { padding: 12px; } .sql-editor-container { min-height: 150px; max-height: 200px; } .form-item-card { padding: 8px; } .el-input, .el-button { font-size: 13px !important; } } </style> ```
07-24
<template> <a-modal :title="title" :width="'70%'" :visible="visible" :confirmLoading="confirmLoading" :maskClosable="false" footer="" @cancel="handleCancel" :bodyStyle="{ padding: '10px' }"> <div class="app-container"> <a-row :gutter="15"> <a-col :span="4"> <a-form ref="elForm" :model="selectedLocation" :rules="rules" size="small" label-width="70px" label-position="right"> <a-col :span="24"> <a-form-item label="地点" prop="address"> <a-textarea :rows="3" v-model="selectedLocation.address" placeholder="自动带出" clearable :style="{ width: '100%' }" disabled /> </a-form-item> </a-col> <a-col :span="24"> <a-form-item label="经度" prop="longitude"> <a-input type="number" v-model="selectedLocation.longitude" placeholder="自动带出" clearable :style="{ width: '100%' }" disabled> </a-input> </a-form-item> </a-col> <a-col :span="24"> <a-form-item label="纬度" prop="latitude"> <a-input v-model="selectedLocation.latitude" placeholder="自动带出" clearable :style="{ width: '100%' }" disabled> </a-input> </a-form-item> </a-col> </a-form> </a-col> <a-col :span="20"> <div style="width: 100%"> <div class="search_box"> <div class="label">关键字搜索</div> <!-- 搜索输入框 --> <a-input-search v-model="searchText" placeholder="请输入地址" @search="handleSearch" class="search-input"> <a-button slot="enterButton">搜索</a-button> </a-input-search> </div> <!-- 搜索结果下拉列表 --> <a-select v-if="searchResults.length > 0" v-model="selectedAddress" show-search :open="isOpen" @dropdownVisibleChange="handleDropdownChange" style="width: 100%" placeholder="请选择地址" :default-active-first-option="false" :filter-option="false" @search="handleSearch" @change="handleSelect"> <a-select-option v-for="(item, index) in searchResults" :key="index" :value="item.name"> {{ item.name }}({{ item.address }}) </a-select-option> </a-select> <!-- 地图容器 --> <div id="map-container"></div> </div> </a-col> </a-row> <span slot="footer" class="dialog-footer"> <a-button @click="closeForm()">取 消</a-button> <a-button type="primary" @click="dataFormSubmit()" class="ml-10">确 定</a-button> </span> </div> </a-modal> </template> <script> import AMapLoader from "@amap/amap-jsapi-loader"; //引入AMapLoader window._AMapSecurityConfig = { // 设置安全密钥 // securityJsCode: "7b8b8b033b824e", }; export default { props: { // show: { // type: Boolean, // default: false, // }, }, data() { return { isOpen: false, rules: {}, title: '仓库定位', visible: false, confirmLoading: false, loading: false, AMap: null, // 保存 AMap 对象 map: null, // 地图实例 searchText: '', // 搜索文本 searchResults: [], // 搜索结果 selectedAddress: '', // 选中的地址 selectedLocation: { longitude: undefined, latitude: undefined, address: '', location: '' }, // 选中的位置信息 position: [], dataForm: { kqLocation: undefined, longitude: undefined, latitude: undefined, address: '' }, }; }, computed: {}, created() { }, mounted() { }, methods: { async show(item, type) { // 显示窗口 this.visible = true this.position = [{ ...item }] this.selectedLocation ={...item} await this.initMap(); }, handleCancel() { this.visible = false this.confirmLoading = false this.position = [] this.selectedLocation = {} }, // 回车搜索 onSearch() { this.searchMap() }, // 取消 closeForm() { this.handleCancel() }, // 确定 dataFormSubmit() { if (!this.selectedLocation.longitude || !this.selectedLocation.latitude) return this.$message.error('请定位仓库位置') this.$emit('changeLocation', this.selectedLocation) this.handleCancel() }, // 初始化地图 async initMap() { try { let centerLen = this.position.length > 0 ? [this.position[0].longitude, this.position[0].latitude] : [106.551294, 29.562943]; this.AMap = await AMapLoader.load({ key: '60dbeff68408ad0ca3b', // 替换为你的高德地图 Key version: '2.0', plugins: ['AMap.AutoComplete', 'AMap.PlaceSearch', 'AMap.Geocoder'], }); console.log('AMap loaded:', this.AMap); // 检查 AMap 是否加载成功 // 创建地图实例 this.map = new this.AMap.Map('map-container', { viewMode: "3D", // 是否为3D地图模式 zoom: 15, center: centerLen, //中心点坐标 resizeEnable: true, }); // 设置中心点 this.addMarker(centerLen); // this.addMarker( [108.551294, 39.562943]); // 绑定地图点击事件 this.map.on('click', async (e) => { console.log('eeeee', e) const geocoder = new this.AMap.Geocoder(); geocoder.getAddress(e.lnglat, (status, result) => { if (status === 'complete' && result.regeocode) { this.selectedLocation = { address: result.regeocode.formattedAddress, // location: `${e.lnglat.getLng()},${e.lnglat.getLat()}`, longitude: e.lnglat.getLng(), latitude: e.lnglat.getLat(), }; this.selectedAddress = result.regeocode.formattedAddress; this.searchText = result.regeocode.formattedAddress; this.addMarker(e.lnglat); } }); }); } catch (error) { console.error('地图初始化失败:', error); } }, // 添加标记 addMarker(lnglat) { console.log('lnglat', lnglat) this.map.clearMap(); new this.AMap.Marker({ position: lnglat, map: this.map, }); this.map.setCenter(lnglat); }, // 处理搜索 async handleSearch(value) { if (!value || !this.AMap) return; const autoComplete = await new this.AMap.AutoComplete(); autoComplete.search(value, (status, result) => { console.log('status, result', status, result) if (status === 'complete' && result.tips) { // console.log('result.tips', result.tips) if (result.tips.length > 0) { this.isOpen=true this.$message.success(`搜索出${result.tips.length}条数据`, 1.5) } this.searchResults = result.tips.map((item) => ({ name: item.name, // address: item.address, address: item.district + item.name, location: item.location, })); } }); }, handleDropdownChange(open) { this.isOpen = open }, // 处理选择地址 handleSelect(value) { const selected = this.searchResults.find((item) => item.name === value); if (selected) { console.log('selected', selected) console.log('selected.location', selected.location) // return // const location = selected.location.split(',').map(Number); const location = selected.location this.selectedLocation = { // address: selected.address || selected.name, // location: selected.location, address: selected.address || selected.name, longitude: selected.location.getLng(), latitude: selected.location.getLat(), }; this.addMarker(location); } } }, }; </script> <style lang="less"> .app-container { height: 70vh; } .search_box { display: flex; justify-content: flex-start; align-items: center; height: 50px; .label { color: #000; width: 100px; } } .content { position: relative; } #panel { position: absolute; top: 50px; right: 20px; } #map-container { overflow: hidden; width: 100%; height: 60vh; margin: 0; } .amap-sug-result { z-index: 2999 !important; } .dialog-footer { // float: right; display: flex; justify-content: flex-end; margin-top: 10px; } </style> 弹窗打开 地图上不能选点 搜索功能页页页用不了
09-18
<template> <div> <el-dialog :title="type === 'add' ? '新增' : '修改'" :visible="dialogVisible" width="570px" top="20px" @close="close" > <el-form ref="addEditDataRef" :model="addEditData" :rules="rules" label-width="140px" > <el-form-item label="合集名称" prop="name"> <el-input v-model="addEditData.name" placeholder="请输入课程合集名称" clearable maxlength="50" show-word-limit /> </el-form-item> <el-form-item prop="img" label="插图"> <img-upload :img.sync="addEditData.img" accept="jpg,png,jpeg" tips="上传插图" :scale="[670, 500]" is-style /> </el-form-item> <div style="display: flex; width: 100%"> <el-form-item label="添加课程" prop="classIdList" /> <el-button type="primary" class="top-left-btn" icon="el-icon-plus" @click="addClick" > 添加课程 </el-button> </div> <div v-for="item in courseList" :key="item.index" style="display: flex" class="course-item" > <!-- <div class="course-index">{{ index + 1 }}</div> --> <div>{{ item.section }}</div> <div style="display: flex; align-items: center; gap: 10px" class="cover-container" > <div class=""> <img :src="item.img" alt="课程封面" class="cover-img" /> </div> <div style="width: 300px">{{ item.name }}</div> <span> <el-button type="text" size="small" icon="el-icon-rank" class="add-btn" @click="handleAdd(item)" /> <span> <el-button type="text" size="small" icon="el-icon-delete" class="add-btn" @click="handleAdd(item)" /> </span> </span> </div> </div> </el-form> <div slot="footer" class="dialog-footer"> <el-button @click="close">取 消</el-button> <el-button type="primary" @click="save">确 定</el-button> </div> </el-dialog> <div> <!-- 表格 --> <el-dialog title="选择课程" :visible="dialogCourse" width="1600px" top="20px" @close="closeCourse" > <div class="search-group mb-20"> <el-input v-model="searchText" placeholder="请输入搜索内容" suffix-icon="el-icon-search" clearable style="width: 300px; float: right; margin: 10px 0" @keyup.enter.native="handleSearch" /> <!-- <el-button type="primary" style="margin-left: 10px" @click="handleSearch" > 搜索 </el-button> --> </div> <el-table :data="pageInfo.list" :height="$baseTableHeight()" max-height="500px" > <!-- 复选框列 --> <el-table-column type="selection" width="55" /> <el-table-column label="ID" prop="id" min-width="100" show-overflow-tooltip :formatter="$formatCell" /> <el-table-column label="分类" prop="typeName" min-width="200" show-overflow-tooltip :formatter="(row) => row.groupName + row.typeName" /> <el-table-column label="课程标题" prop="title" min-width="150" show-overflow-tooltip /> <el-table-column label="封面图" width="100"> <template #default="{ row }"> <span v-if="!row.videoCover">-</span> <el-image v-else style="width: 34px; height: 19px" :preview-src-list="[$imageSrc(row.videoCover, 2)]" :src="$imageSrc(row.videoCover)" /> </template> </el-table-column> <el-table-column label="作者" prop="lecturerUser" min-width="200" show-overflow-tooltip > <template #default="{ row }"> <div class="flex-center"> <div> <el-image v-if="row.lecturerUser" style="width: 30px; height: 30px" :preview-src-list="[ $imageSrc(row.lecturerUser.userIcon, 2), ]" :src="$imageSrc(row.lecturerUser.userIcon)" /> <span v-else>-</span> </div> <div style="margin-left: 10px"> <div>{{ row.lecturerUser.nickName || '' }}</div> <div>{{ row.lecturerUser.phone || '' }}</div> </div> </div> </template> </el-table-column> <el-table-column label="发布时间" prop="pushTime" width="170" /> </el-table> <!-- 分页组件 --> <el-pagination class="pagination" :current-page="pageInfo.pageNum" :page-sizes="[10, 20, 50, 100]" :page-size="pageInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.total" @size-change="setPageSize" @current-change="listPage" /> <div slot="footer" class="dialog-footer"> <el-button @click="closeCourse">取 消</el-button> <el-button type="primary" @click="saveCourse">确 定</el-button> </div> </el-dialog> </div> </div> </template> <script> import ImgUpload from '@/components/imgUpload/imgUpload' export default { name: 'NodesAdd', components: { ImgUpload }, props: { dialogVisible: { type: Boolean, default: false, }, type: { type: String, default: '', }, rowData: { type: Object, default: () => {}, }, }, data() { return { addEditData: { name: '', // 标题 img: '', // 插图 classIdList: [], // 课程id列表 }, searchText: '', // 搜索内容 hasSearched: false, // 弹窗 dialogCourse: false, // 课程弹窗 courseList: [ { id: 1, section: '第一讲', name: '课程介绍与环境搭建去去去去去去去去去去七七七七七七七七七七七七七七七七七七七七七七七七七七七七', img: 'https://picsum.photos/seed/course1/200/150', }, { id: 2, section: '第二讲', name: 'Vue 2 基础语法与响应式原理', img: 'https://picsum.photos/seed/course2/200/150', }, { id: 3, section: '第三讲', name: '组件化开发与通信机制', img: 'https://picsum.photos/seed/course3/200/150', }, { id: 4, section: '第四讲', name: 'Vue Router 与状态管理', img: 'https://picsum.photos/seed/course4/200/150', }, { id: 5, section: '第五讲', name: '构建工具与生产部署', img: 'https://picsum.photos/seed/course5/200/150', }, ], rules: { name: [{ required: true, message: '请输入标题', trigger: 'blur' }], img: [{ required: true, message: '请上传插图', trigger: 'blur' }], classIdList: [ { required: true, message: '请添加课程', trigger: 'blur' }, ], }, // ****** 列表相关 ****** pageNum: 1, // 页码 pageSize: 10, // 分页条数 total: 0, // 总数 listTable: [], // 列表list reqCond: { // 请求参数 pageNum: 1, pageSize: 20, }, pageInfo: { list: [], }, } }, watch: { dialogVisible(val) { if (val) { if (this.type === 'edit') { this.addEditData = { ...this.rowData, } this.getUserList(this.rowData.createUserName) } else { this.getUserList() } } }, }, created() { this.getUserList() this.listPage() }, methods: { handleSearch() { this.hasSearched = true // 模拟搜索请求(实际项目中应调用 API) setTimeout(() => { // 模拟搜索结果过滤逻辑 const mockResults = [ { id: 321, title: 'Vue3 实战教程:从入门到精通', category: '前端开发', author: '技术大牛', publishTime: '2025.06.15 20:34:34', isNew: true, }, { id: 320, title: 'Element UI 组件库高级应用', category: 'UI框架', author: 'UI专家', publishTime: '2025.06.12 20:12:31', isNew: false, }, { id: 319, title: 'JavaScript 性能优化技巧大全', category: '前端开发', author: '性能大师', publishTime: '2025.06.10 15:45:22', isNew: false, }, ] // 根据搜索词和搜索类型过滤结果 if (!this.searchText) { this.searchResults = mockResults } else { this.searchResults = mockResults.filter((item) => { if (this.searchType === 'all') { return ( item.title.includes(this.searchText) || item.author.includes(this.searchText) || item.category.includes(this.searchText) ) } else if (this.searchType === 'title') { return item.title.includes(this.searchText) } else if (this.searchType === 'author') { return item.author.includes(this.searchText) } else if (this.searchType === 'category') { return item.category.includes(this.searchText) } return false }) } }, 500) }, addClick() { this.dialogCourse = true }, closeCourse() { this.dialogCourse = false }, saveCourse() { this.dialogCourse = false }, // 课程分页列表查询 async listPage(pageNum) { pageNum > 0 && (this.reqCond.pageNum = pageNum) const { data } = await this.$http.get( this.$api.classInfo.listPageClassInfo, this.reqCond ) this.pageInfo = data }, setPageSize(pageSize) { this.reqCond.pageSize = pageSize this.listPage() }, // 关闭弹窗 close() { this.addEditData = {} this.$refs.addEditDataRef.resetFields() this.$emit('update:dialogVisible', false) }, // 保存 save() { this.$refs.addEditDataRef.validate(async (valid) => { if (valid) { let text = this.type === 'add' ? '新增' : '修改' let param = {} const { title, insertImage, id, mainContent, qrCodeUrl, createUser, status, releaseTime, } = this.addEditData param = { title, insertImage, mainContent, qrCodeUrl, createUser, status, releaseTime, } if (this.type === 'edit') { param.id = id } this.$baseConfirm(`你确定是否${text}这条数据吗?`, async () => { await this.$http.post(this.$api.newsNote.addOrUpdate, { ...param, }) this.$baseMessage(`操作成功`) this.$emit('queryPage') this.close() }) } }) }, // 获取作者下拉列表 async getUserList(key) { const { data } = await this.$http.get(this.$api.user.searchUser, { key, }) this.userList = data }, }, } </script> <style lang="scss" scoped> .c-ml-10 { margin-left: 10px; } ::v-deep .el-dialog__body { height: 650px; overflow-y: auto; } .cover-img { width: 60px; /* 设置图片宽度 */ height: 60px; /* 设置图片高度 */ object-fit: cover; /* 保持图片比例并覆盖容器 */ border-radius: 4px; /* 圆角 */ } .course-item { // width: 100%; margin-top: 10px; margin-left: 100px; height: 84px; } .cover-container { width: 80%; border: 1px solid #ccc; padding: 10px; border-radius: 4px; /* 圆角 */ margin-left: 10px; } </style> 完善代码
07-02
<template> <div> <div class="search" v-if="from !== 'detail'"> <!-- 新建商转样申请 --> <div class="header">{{$t('pmall-retail-business-product-apply-new')}}</div> </div> <div v-if="step === 1 || from === 'detail'"> <h3 class="header" style="margin-bottom:10px;">{{$PIX.I18n.get('pmall-incentive-title-product')}}</h3> <NewSampleUpList ref="sampleDataList" :tableDataList="tableDataList" :pageInfo="pageInfo" :isDialogHeight="from === 'detail'" @handleSelectionChange="handleSelectionChange" @page-change="pageChange" /> <div style="text-align:center;margin-bottom:20px;"> <xui-button style="min-width:40px;padding-left:0;padding-right:0;" @click="toDown()"><i class="fa fa-chevron-down" style="font-size:16px;"></i></xui-button> <xui-button style="min-width:40px;padding-left:0;padding-right:0;margin-left:50px;" @click="toUp()"><i class="fa fa-chevron-up" style="font-size:16px;"></i></xui-button> </div> <div style="display:flex;margin-bottom:20px;"> <div style="width:200px;line-height:30px;"><h3>{{$t('pmall-retail-business-already-add')}}</h3></div> <div style="display:flex;width:100%;"> <div style="width:80px;line-height:30px;">{{$t('pmall-retail-business-product-sn')}}</div> <div style="width:100%"><xui-input type="text" style="width:100%" clearable v-model="searchKey"></xui-input></div> <div style="margin-left:20px;width:173px;"> <xui-button class="btn" type="primary" style="height:32px;" @click="getFilterData()">{{ $PIX.I18n.get('pmall-lable-role-search') }}</xui-button> <xui-button class="btn" style="height:32px;" @click="resetData()">{{ $PIX.I18n.get('pmall-lable-role-reset') }}</xui-button> </div> </div> </div> <NewSampleDownList ref="sampleDataList" :tableDataList="tableDataList2" :pageInfo="pageInfo2" :isDialogHeight="from === 'detail'" @handleSelectionChange="handleSelectionChange2" @page-change="pageChange2" /> <div class="btnArea" style="text-align:center;"> <xui-button @click="cancelForm()" size="bigger">{{ $PIX.I18n.get('pmall-bp-quick-purchase-cancel') }}</xui-button> <xui-button type="primary" size="bigger" @click="sureForm()">{{$PIX.I18n.get('pmall-bp-button-ok')}}</xui-button> </div> </div> <div v-if="step === 2"> <xui-form type="dialog" :model="submitForm" :rules="submitFormRules" ref="submitForm" style="margin-top: 20px" label-width="120px"> <xui-row :gutter="20"> <xui-col :span="8"> <xui-form-item :label="$PIX.I18n.get('pmall-bp-label-applicationType')" prop="type"> <xui-select :placeholder="$PIX.I18n.get('pmall-common-placeholder-select')" v-model="submitForm.type" style="width: 100%" clearable > <xui-option v-for="item in typeList" :key="item.value" :label="item.label" :value="item.value"> </xui-option> </xui-select> </xui-form-item> </xui-col> <xui-col :span="8"> <xui-form-item :label="$t('pmall-retail-business-display-company')" prop="company"> <xui-select :placeholder="$PIX.I18n.get('pmall-common-placeholder-select')" v-model="submitForm.company" style="width: 100%" @change="searchCompanyVisible" > <xui-option v-for="item in channelList" :key="item.channelId" :label="item.channelName" :value="item.channelId"> </xui-option> </xui-select> </xui-form-item> </xui-col> <xui-col :span="8"> <xui-form-item :label="$t('pmall-retail-business-display-company-code')"> <span>{{companyCode}}</span> </xui-form-item> </xui-col> </xui-row> <xui-row :gutter="20"> <xui-col :span="8"> <xui-form-item :label="$t('pmall-retail-business-display-store')" prop="store"> <xui-select :placeholder="$PIX.I18n.get('pmall-common-placeholder-select')" v-model="submitForm.store" style="width: 100%" @change="handleStoreChange" > <xui-option v-for="item in storeList" :key="item.storeCode" :label="item.storeName" :value="item.storeCode"> </xui-option> </xui-select> </xui-form-item> </xui-col> <xui-col :span="8"> <xui-form-item :label="$t('pmall-retail-business-display-store-code')"> <span>{{storeCode}}</span> </xui-form-item> </xui-col> <xui-col :span="8"> <xui-form-item :label="$t('pmall-retail-business-display-store-type')"> <span>{{storeType}}</span> </xui-form-item> </xui-col> </xui-row> <xui-form-item :label="$t('pmall-retail-special-sample-reason')" prop="reason"> <xui-input v-model="submitForm.reason" counter :maxlength="500" auto-complete="off" type="textarea" style="width: 96%" :rows="4" :placeholder="$PIX.I18n.get('pmall-operation-info-verifiyInput')" ></xui-input> </xui-form-item> <xui-form-item :label="$PIX.I18n.get('pmall-voiceDetail-Attachments')" prop="attachmentList"> <edm-v3-upload ref="attachment" businessType="ClSampleUnlock" :isOverrideAccept="true" style="width: 560px" :limit="5" :multiple="true" accept=".jpg,.png.pdf,.docx,.zip" capacity="200" :prop-file-list="propFileList" :change="changeUpload" > </edm-v3-upload> </xui-form-item> </xui-form> <div class="addArea"> <div style="display:flex;justify-content:space-between;margin-bottom:10px;"> <div>{{$PIX.I18n.get('pmall-incentive-title-product')}}</div> <div style="display:flex;"> <xui-button @click="addLocalData()">{{$t('pmall-retail-special-add')}}</xui-button> <xui-button @click="delLocalData()">{{$PIX.I18n.get('pmall-rep-office-contact-delete')}}</xui-button> </div> </div> <div class="tableArea"> <SampleDataModalList ref="sampleDataModalList" :tableDataList="tableDataList3" :pageInfo="pageInfo3" :innerMulitlist="innerMulitlist" :isSave="isSave" @handleSelectionChange="handleSelectionChange3" @page-change="pageChange3" @getNewSnList="getNewSnList" @clearSnList2="clearSnList2" @getNumDetailId="getNumDetailId" :dialogFormVisible="dialogFormVisible" :tableLoading="tableLoading" /> </div> </div> <div class="btnArea" style="text-align:center;"> <xui-button @click="cancelForm2()" size="bigger">{{ $PIX.I18n.get('pmall-bp-quick-purchase-cancel') }}</xui-button> <xui-button type="primary" size="bigger" @click="saveApplication()">{{ $PIX.I18n.get('pmall-common-button-save')}}</xui-button> <xui-button type="primary" size="bigger" @click="submitToGam()">{{$PIX.I18n.get('pmall-common-button-submit')}}</xui-button> </div> </div> <xui-dialog showcenter :title="$PIX.I18n.get('pmall-friendly-reminder')" :close-on-click-modal="false" :visible.sync="tipsVisible" width="30%"> <div :style="errorMsg.length >10 ?'height: 400px':'height: 200px'"> <xui-scrollbar style="height: 100%"> <p v-for="item in errorMsg" :key="item" style="padding: 5px">{{ item }}</p> </xui-scrollbar> </div> <span slot="footer" class="dialog-footer" center> <xui-button type="primary" size="bigger" @click="tipsVisible = false; cancelForm2(); ">{{ $PIX.I18n.get('pmall-bp-button-ok') }}</xui-button> </span> </xui-dialog> <search-box ref="searchBox2" @getSearchData="getSearchData" :search-data="snList2" :placeholder="$t('pmall-retail-business-tips1')" :search-title="$t('pmall-retail-demo-sn-no')" @confirm="confirmSearch2" /> <xui-dialog :title="$t('pmall-retail-business-has-num')" class="layout-form" showcenter :visible.sync="dialogFormVisible3" width="1100px" > <div class="tableArea"> <SampleDetaillList ref="SampleDetaillList" :isAdd="true" :storeCode="storeCode" :numDetailId="numDetailId" :dialogVisible="dialogFormVisible3"/> </div> </xui-dialog> </div> </template> <script> import { businessSampleV1SampleQuery } from './api' import { getHWCategoryList,getCompanyList,businessSampleV1Save,businessSampleV1Push,businessSampleV1CheakSn, sampleUnlockV1Push, sampleUnlockV1Save, sampleUnlockV1Query } from './api'; import i18n from './i18n/i18n.vue'; import NewSampleUpList from './components/new-sample-up-list.vue'; import NewSampleDownList from './components/new-sample-down-list.vue'; import SampleDataModalList from './components/sample-data-modal-list.vue'; import SampleDetaillList from './components/business-sample-detail-list.vue';//引入弹框的父组件 import EdmV3Upload from '@components/edm-v3-upload/edm-v3-upload.vue'; import searchBox from '@components/multi-choice-search-box/search-box.vue'; import inputText from '@components/multi-choice-search-box/input-text.vue'; let timeout; export default { props:['list','from'], mixins: [i18n], components: { NewSampleUpList, NewSampleDownList, SampleDataModalList, SampleDetaillList, EdmV3Upload, searchBox, inputText }, data() { return { uploadHeaders: { 'x-csrf-token': localStorage.getItem('pmall-x-csrf-token'), 'x-pix-csrf-token': localStorage.getItem('pix-environment-csrf-token') }, ruleForm: { marketingName: [], snList: [], storeCode: '', storeName: '', statusList: [] }, snList2: [], uploadUrl: $PIX.Pmall.getPmallProxy('pmallbase') + '/pmallbase/edm3/uploadByStream', showSpuTips: false, showFlag: true, treeSelectAll: false, searchTreeSelectAll: false, hasPermission: false, dialogFormVisible: false, dialogFormVisible2: false, dialogFormVisible3:false, numDetailId:"", tipsVisible: false, productNameData: [], allOfferingList: [], allSpuList: [], searchPreValue: [], roleDTOList: [], propFileList: [], searchSelectLength: 0, maxSize: 200, currentTab: 'all', selectInput: '', tabStatus: [1, 2, 3, 4, 5, 6, 7, 8], lang: $PIX.Context.currentLanguage.key, defaultProps: { children: 'children', label: node => { return node.spuId ? node.spuNameCn : node.nameCn; } }, submitForm: { type:'', company:'', store:'', reason: '', attachmentList: [] }, companyName:'', companyCode:'', storeCode:'', storeName:'', storeType:'', typeList:[ {label:this.$t('pmall-retail-business-product-sample-option1'),value:1}, {label:this.$t('pmall-retail-business-product-sample-option2'),value:2}, {label:this.$t('pmall-retail-business-product-sample-option3'),value:3} ], submitFormRules: { reason: [ { required: true, message: this.$t('pmall-retail-business-product-sample-tips8'), trigger: 'blur' }, { min: 1, max: 500, message: this.$t('pmall-retail-business-product-sample-tips9'), trigger: 'blur' } ], type: [ { required: true, message: $PIX.I18n.get('pmall-operation-info-verifiySelect'), trigger: 'change' } ], company: [ { required: true, message: $PIX.I18n.get('pmall-operation-info-verifiySelect'), trigger: 'change' } ], store: [ { required: true, message: $PIX.I18n.get('pmall-operation-info-verifiySelect'), trigger: 'change' } ] }, tableDataList: [], tableDataList2: [], tableDataList3: [], totalTableDataList:[], totalTableDataList2:[], totalTableDataList3:[], savedTotaTableDataList:[], searchTotalTableDataList:[], searchKey:'', errorMsg: [], pageInfo: { currentPage: 1, pageSize: 10, totalRowCount: 0 }, pageInfo2: { currentPage: 1, pageSize: 10, totalRowCount: 0 }, pageInfo3: { currentPage: 1, pageSize: 10, totalRowCount: 0 }, channelList:[], totalStoreList:[], storeList:[], tableLoading: false, mulitList: [], mulitList2:[], mulitList3:[], submitDataList:[], singleMulitList: [], isMul: true, innerMulitlist: [], newSnList: [], isSave: true, step:1 }; }, computed: { // 导入 fileImport() { const serviceId = 'ptco.sampleProductMgt.import'; const taskType = 'pmall-operation-sample-business-management-import'; const taskTypeDisplay = '商转样导入'; const siteId = $PIX.Context.app.currentId; const userId = $PIX.Context.currentUser.account || $PIX.Context.currentUser.ssoUid; return `${window.location.origin + $PIX.Environment.apiGatewayPrefix}mp.asyncTask.import?serviceId=${encodeURIComponent( serviceId )}&siteId=${encodeURIComponent(siteId)}&taskType=${encodeURIComponent(taskType)}&taskTypeDisplay=${encodeURIComponent( taskTypeDisplay )}&userId=${encodeURIComponent(userId)}&edmSupport=false`; }, fileImportPath() { return $PIX.Pmall.getPmallProxy('pmallbase') + '/pmallbase/edm3/uploadByStream'; }, searchTreeIndeterminate() { this.searchTreeSelectAll = false; if (this.searchSelectLength == this.allSpuList.length + this.allOfferingList.length) { this.searchTreeSelectAll = true; } return this.searchSelectLength > 0 && this.searchSelectLength < this.allSpuList.length + this.allOfferingList.length; }, treeExpandKey() { return []; }, statusList() { const list = [ { labelCN: '草稿', labelEN: 'To be Application', value: 1 }, { labelCN: '待地市审批', labelEN: 'To be summarized', value: 2 }, { labelCN: '待省终端审批', labelEN: 'To be approved', value: 3 }, { labelCN: '待地区部确认', labelEN: 'To be confirmed', value: 4 }, { labelCN: '地区部确认完成', labelEN: 'confirmed', value: 5 }, { labelCN: '商转样完成', labelEN: 'completed', value: 6 }, { labelCN: '驳回', labelEN: 'Rejected', value: 7 }, { labelCN: '已撤回', labelEN: 'canced', value: 8 } ]; if (this.currentTab === 'all') { return list; } if (this.currentTab === 'draft') { return list.filter(v => v.value == 1 || v.value == 7 || v.value == 8); } if (this.currentTab === 'process') { return list.filter(v => v.value == 4 || v.value == 5 || v.value == 6); } if (this.currentTab === 'completed') { return list.filter(v => v.value == 3); } }, isDisabledBatchApply() { return this.mulitList.filter(item => item.status != '0' && item.status != '1' && item.status != '7' && item.status != '8').length > 0; } }, methods: { getNumDetailId(info){ if(this.storeCode.length <= 0) return this.$message.warning('请先选择陈列门店');//新增时如果样机陈列门店,不能查看 this.dialogFormVisible3 = true; this.numDetailId = info.marketingCode;//对应supId }, getCompanyList(){ let params = { lang: this.lang, appId: this.appId, customerCode: '', target: 'pmallbase' }; getCompanyList(params).then(res => { if (res.code === '0') { const { channelList, storeList } = res.result || {}; this.channelList = channelList; this.totalStoreList = storeList; } }); }, searchCompanyVisible(val) { let currentCompany = this.channelList.filter(item => item.channelId === val); this.companyCode = currentCompany.length ? currentCompany[0].channelId:''; this.companyName = currentCompany.length ? currentCompany[0].channelName:''; this.storeList = this.totalStoreList.filter(item => item.channelId == val); this.submitForm.store = ''; this.storeCode = ''; this.storeName = ''; this.storeType = ''; }, handleStoreChange(val){ let currentStore = this.storeList.filter(item => item.storeCode === val); this.storeCode = currentStore.length ? currentStore[0].storeCode:''; this.storeName = currentStore.length ? currentStore[0].storeName:''; this.storeType = currentStore.length ? currentStore[0].regionalImageLevel:''; this.getNumber() }, //新增选门店刷新样机数量 getNumber() { let params = { storeCode:this.storeCode, spuId:this.tableDataList3[0].marketingCode, pageSize: 10, curPage: 1, } businessSampleV1SampleQuery(params).then(res=>{ let newTotalTableDataList3 = this.totalTableDataList3.map(item=>{ return{ ...item, storePrototypeNumber: res.result.pageVO.totalRows } }) console.log(newTotalTableDataList3,"刷新数据的") this.$set(this,'totalTableDataList3',newTotalTableDataList3) }) }, addLocalData(){ this.snList2 = []; this.$refs.searchBox2.dialogVisible = true; }, delLocalData(){ console.log(this.totalTableDataList3,11111) for(let i=0;i<this.totalTableDataList3.length;i++){ for(let itemTwo of this.mulitList3){ if(this.totalTableDataList3[i].imei === itemTwo.imei){ this.totalTableDataList3.splice(i,1); if(i>0){ i--; } } } } this.tableDataList3 = []; this.tableDataList3 = this.totalTableDataList3.slice(0,this.pageInfo.pageSize); this.pageInfo3.totalRowCount = this.totalTableDataList3.length; this.pageInfo3.currentPage = 1; this.savedTotaTableDataList = this.totalTableDataList3; }, getFilterData(){ this.pageInfo2.currentPage = 1; // this.pageInfo2.pageSize = this.pageSize; this.searchTotalTableDataList = this.totalTableDataList2.filter(item => (item.imei.indexOf(this.searchKey) > -1)); this.tableDataList2 = this.searchTotalTableDataList.slice(0,this.pageInfo2.pageSize); this.pageInfo2.totalRowCount = this.searchTotalTableDataList.length; }, resetData(){ this.searchKey = ''; }, cancelForm(){ this.$confirm(this.$t('pmall-retail-business-tips2'), this.$PIX.I18n.get('pmall-china-tips-title'), { confirmButtonText: this.$PIX.I18n.get('pmall-common-button-confirm'), cancelButtonText: this.$PIX.I18n.get('pmall-china-tips-cancle') }).then(() => { this.$emit('changeIsShowList',true) }).catch(() => {}); }, cancelForm2(){ this.$emit('changeIsShowList',true) }, getSearchData(val){ this.snList2 = val.split('\n'); }, confirmSearch2(val){ this.snList2 = val; localStorage.setItem('business-sample-snlist',JSON.stringify(val)); if(!val || val.length == 0){ this.$message.warning(this.$t('pmall-retail-business-product-sample-tips7')); this.$refs.searchBox2.dialogVisible = true; return; } if(val.length > 100){ this.$message.warning(this.$t('pmall-retail-special-tips2')); this.$refs.searchBox2.dialogVisible = true; return; } businessSampleV1CheakSn(this.snList2).then(res => { this.totalTableDataList = res.result; this.tableDataList = this.totalTableDataList.slice(0,this.pageInfo.pageSize); this.totalTableDataList2 = []; this.tableDataList2 = []; this.pageInfo.totalRowCount = this.totalTableDataList.length; this.pageInfo.currentPage = 1; this.pageInfo2.totalRowCount = 0; this.pageInfo2.currenPage = 1; }); this.isShowList = false; this.step = 1; }, sureForm(){ if(this.from === 'detail') { this.$emit('addSNConfirmDialog',this.totalTableDataList2) return } this.totalTableDataList2.forEach(item => { if (!this.savedTotaTableDataList.find(itemTwo => item.imei === itemTwo.imei)) { this.totalTableDataList3.push(item); } }); this.savedTotaTableDataList = this.totalTableDataList3; this.totalTableDataList2 = []; this.tableDataList2 = []; this.pageInfo3.totalRowCount = this.totalTableDataList3.length; this.pageInfo3.currentPage = 1; this.tableDataList3 = this.totalTableDataList3.slice(0,this.pageInfo3.pageSize); this.searchKey = ''; this.getFilterData(); this.step = 2; this.pageInfo.pageSize = 10; }, sureForm2(){ this.$emit('changeIsShowList',true) }, toDown(){ this.totalTableDataList2 = [...this.totalTableDataList2,...this.mulitList]; this.tableDataList2 = this.totalTableDataList2.slice(0,this.pageInfo2.pageSize); for(let i=0; i<this.totalTableDataList.length;i++){ for(const itemTwo of this.mulitList){ if(this.totalTableDataList[i].imei === itemTwo.imei){ this.totalTableDataList.splice(i,1); console.log(i) console.log(this.totalTableDataList) if(i>0){ i--; } } } } console.log(this.totalTableDataList) this.tableDataList = this.totalTableDataList.slice(0,this.pageInfo.pageSize); this.pageInfo.totalRowCount = this.totalTableDataList.length; this.pageInfo2.totalRowCount = this.totalTableDataList2.length; this.pageInfo.currentPage = 1; this.pageInfo2.currentPage = 1; }, toUp(){ this.totalTableDataList = [...this.mulitList2,...this.totalTableDataList]; this.tableDataList = this.totalTableDataList.slice(0,this.pageInfo.pageSize); for(let i=0; i<this.totalTableDataList2.length;i++){ for(const itemTwo of this.mulitList2){ if(this.totalTableDataList2[i].imei === itemTwo.imei){ this.totalTableDataList2.splice(i,1); if(i>0){ i--; } } } } this.tableDataList2 = this.totalTableDataList2.slice(0,this.pageInfo2.pageSize); this.pageInfo2.totalRowCount = this.totalTableDataList2.length; this.pageInfo.totalRowCount = this.totalTableDataList.length; this.pageInfo.currentPage = 1; this.pageInfo2.currentPage = 1; }, pageChange(page) { this.$nextTick(() => { this.pageInfo.currentPage = page.currentPage; this.pageInfo.pageSize = page.pageSize; this.tableDataList = this.totalTableDataList.slice((this.pageInfo.currentPage - 1) * this.pageInfo.pageSize, this.pageInfo.currentPage * this.pageInfo.pageSize) }); }, pageChange2(page) { this.$nextTick(() => { this.pageInfo2.currentPage = page.currentPage; this.pageInfo2.pageSize = page.pageSize; this.tableDataList2 = this.totalTableDataList2.slice((this.pageInfo2.currentPage - 1) * this.pageInfo2.pageSize, this.pageInfo2.currentPage * this.pageInfo2.pageSize) console.log(this.pageInfo2.currentPage - 1) console.log(this.pageInfo2.pageSize) console.log(this.tableDataList2) console.log(this.totalTableDataList2) }); }, pageChange3(page) { this.$nextTick(() => { this.pageInfo3.currentPage = page.currentPage; this.pageInfo3.pageSize = page.pageSize; this.tableDataList3 = this.totalTableDataList3.slice((this.pageInfo3.currentPage - 1) * this.pageInfo3.pageSize, this.pageInfo3.currentPage * this.pageInfo3.pageSize) console.log(this.tableDataList3,"这是表格数据") }); }, handleSelectionChange(val) { this.mulitList = val; }, handleSelectionChange2(val) { this.mulitList2 = val; }, handleSelectionChange3(val) { this.mulitList3 = val; }, batchApply() { this.$refs.searchBox2.dialogVisible = true; }, // 导入前格式校验 beforeUsersUpload(file) { let last = file.name.split('.'); last = last[last.length - 1].toLowerCase(); if (['xlsx'].includes(last)) { } else { this.$message.error(this.$t('pmall-retail-business-import-filetype-tip')); return false; } if (file.size > 20 * 1024 * 1024) { this.$message.error(this.$t('pmall-retail-business-import-fileSize-tip')); return false; } }, // 导入成功 usersImportSuccess(response) { if (+response.code === 200) { //导入成功,查看我的导入 this.$alert($PIX.I18n.get('pmall-common-message-import-success'), $PIX.I18n.get('pmall-china-message-title'), { confirmButtonText: $PIX.I18n.get('pmall-common-button-goahead-view'), type: 'success', showConfirmButton: 'false', callback: action => { if (action === 'confirm') { $PIX.Util.goTo('my-imExport?tab=myImport', '_blank'); } } }); } else { this.$message.error($PIX.I18n.get('pmall-common-prompt-import-fail')); // 导入失败 } }, inputData(key) { this.selectInput = key; this.$refs.searchBox.dialogVisible = true; }, inputData2(key) { this.selectInput = key; this.$refs.searchBox2.dialogVisible = true; }, showProduct() { this.dialogFormVisible2 = true; }, resetPageData(){ this.tableDataList = []; this.tableDataList2 = []; this.tableDataList3 = []; this.totalTableDataList = []; this.totalTableDataList2 = []; this.totalTableDataList3 = []; this.savedTotaTableDataList = []; this.searchTotalTableDataList = []; this.searchKey = ''; this.pageInfo = { currentPage: 1, pageSize: 10, totalRowCount: 0 }; this.pageInfo2 = { currentPage: 1, pageSize: 10, totalRowCount: 0 }; this.pageInfo3 = { currentPage: 1, pageSize: 10, totalRowCount: 0 }; }, submitToGam() { this.$refs.submitForm?.validate(valid => { if (valid) { const flag = this.submitForm.attachmentList.some(v => !v.docId); if (flag) return this.$message.warning(this.$t('pmall-upload-tips')); if(this.mulitList3.length>0) { this.submitDataList = this.mulitList3 }else { this.submitDataList = this.totalTableDataList3 } if (!this.submitDataList.length) { return this.$message.warning(this.$t('pmall-delete-select-tips2')); } if (this.submitDataList?.length > 100) return this.$message.warning(this.$t('pmall-retail-special-tips3')); const docs = this.submitForm.attachmentList?.map(v => { return { id: v.docId, title: v.name }; }) || []; const params = { appNo: "", docs, reason: this.submitForm.reason || '', businessType: 1, snDetailList: this.submitDataList.map(v =>{ return { sn: v.sn, status: v.status, productCode:v.productCode, productName:v.productName, storeCode:this.storeCode, storeName:this.storeName, storeType:this.storeType, repOfficeCode:v.repOfficeCode || '', repOffice:v.repOffice || '', cityCode:v.cityCode || '', cityName:v.cityName || '', reportType: this.submitForm.type, storePrototypeNumber:v.storePrototypeNumber, prototypeModel:v.prototypeModel || v.productType || '', marketingName: v.marketingName || '', productFamily: v.productFamily || v.productSeries || '', industry:v.industry || '', commercialChannelName:v.commercialChannelName || '', commercialChannelId:v.commercialChannelId || '', retailerChannelName:this.companyName, retailerChannelCode:this.companyCode }; }) || [], }; businessSampleV1Push(params) .then(res => { if (res.code === '0') { if (res.result.status == '1') { this.submitForm = { reason: '', attachmentList: [], type:'', company:'', store:'' }; this.companyName = ''; this.companyCode = ''; this.storeName = ''; this.storeCode = ''; this.propFileList = []; this.$message.success(this.$PIX.I18n.get('pmall-incentive-prompt-success')); this.resetPageData(); this.$emit('changeIsShowList',true); } else { const errList = res.result?.snMap?.filter(v => v.status != 1) || []; if (errList?.length) { this.errorMsg = errList?.map(v => 'SN:' + v.sn + $PIX.I18n.get('pmall-buyer-center-Hwtransfer-operationTipsfour', { val: v.msg })) || []; this.tipsVisible = true; }else{ this.$message.error(res.result.msg); } } } else { this.$message.error(this.$PIX.I18n.get('pmall-china-message-actionFail')); } }) .catch(() => { this.$message.error(this.$PIX.I18n.get('pmall-china-message-actionFail')); }); } else { return false; } }); }, saveApplication() { this.$refs.submitForm?.validate(valid => { if (valid) { const flag = this.submitForm.attachmentList.some(v => !v.docId); if (flag) return this.$message.warning(this.$t('pmall-upload-tips')); if(this.mulitList3.length>0) { this.submitDataList = this.mulitList3 }else { this.submitDataList = this.totalTableDataList3 } if (!this.submitDataList.length) { return this.$message.warning(this.$t('pmall-delete-select-tips2')); } if (this.submitDataList?.length > 100) return this.$message.warning(this.$t('pmall-retail-special-tips3')); const docs = this.submitForm.attachmentList?.map(v => { return { id: v.docId, title: v.name,status:'success' }; }) || []; const params = { appNo: "", // docName: docs && docs.length > 0 ? docs[0].title:'', // docId:docs && docs.length > 0 ? docs[0].id:'', docs, reason: this.submitForm.reason || '', businessType: 1, snDetailList: this.submitDataList.map(v =>{ return { sn: v.sn, status: v.status, productCode:v.productCode, productName:v.productName, storeCode:this.storeCode, storeName:this.storeName, storeType:this.storeType, repOfficeCode:v.repOfficeCode || '', repOffice:v.repOffice || '', cityCode:v.cityCode || '', cityName:v.cityName || '', reportType: this.submitForm.type, storePrototypeNumber:v.storePrototypeNumber, prototypeModel:v.prototypeModel || v.productType || '', marketingName: v.marketingName || '', productFamily: v.productFamily || v.productSeries || '', industry:v.industry || '', commercialChannelName:v.commercialChannelName || '', commercialChannelId:v.commercialChannelId || '', retailerChannelName:this.companyName, retailerChannelCode:this.companyCode }; }) || [], }; businessSampleV1Save(params) .then(res => { if (res.code === '0') { this.$message.success(this.$PIX.I18n.get('pmall-china-message-saveSuccess')); this.submitForm = { reason: '', attachmentList: [], type:'', company:'', store:'' }; this.propFileList = []; this.resetPageData(); this.$emit('changeIsShowList',true); } else { this.$message.error(this.$PIX.I18n.get('pmall-china-message-actionFail')); } }) .catch(() => { this.$message.error(this.$PIX.I18n.get('pmall-china-message-actionFail')); }); } else { return false; } }); }, //上传文件前验证 uploadBefore(file) { const size = file.size; const fileName = file && file.name; const nameArr = fileName && fileName.split('.'); if (nameArr && nameArr.length >= 1) { const suffix = nameArr[nameArr.length - 1].toLowerCase(); const suffixArr = ['jpg', 'png', 'pdf', 'docx', 'zip']; if (!suffixArr.includes(suffix)) { this.$message.error(this.$t('pmall-activity-xlsXlsx')); this.fileList = []; return false; } } if (size > 200 * 1024 * 1024) { this.$message.error($PIX.I18n.get('pmall-common-message-uploadError1m')); this.fileList = []; return false; } }, changeUpload(fileList) { const resList = []; for (let i = 0; i < fileList.length; i++) { const obj = { name: fileList[i]['name'], docId: fileList[i]['docId'] }; resList.push(obj); } this.submitForm.attachmentList = [...resList]; } }, watch: { "list": { handler(val) { if(val){ this.totalTableDataList = val; this.tableDataList = this.totalTableDataList.slice(0,this.pageInfo.pageSize); this.pageInfo.totalRowCount = this.totalTableDataList.length; } }, deep:true, immediate:true }, }, created() { this.getCompanyList(); }, mounted() { } }; </script> <style lang="scss" scoped> .retail-demo-device-container { overflow: hidden; box-sizing: border-box; width: 100%; height: 100%; & > .line { width: 100%; height: 10px; background: #f1f1f1; } .detail { width: 100%; overflow: hidden; box-sizing: border-box; padding: 30px 20px; .search { width: 100%; overflow: hidden; box-sizing: border-box; padding-bottom: 10px; & > .header { font-size: 16px; color: #000; font-weight: 700; } } & > .line { width: calc(100% + 40px); height: 1px; background: #e6e6e6; position: relative; right: 20px; } .table { width: 100%; overflow: hidden; box-sizing: border-box; margin-top: 30px; position: relative; .tabs { width: 100%; overflow: hidden; box-sizing: border-box; ::v-deep .xui-loading-mask { z-index: 899; } } .right { display: flex; justify-content: space-between; align-items: center; height: 32px; position: absolute; right: 0; top: 0; .terminology { font-size: 12px; color: #4f8fd0; cursor: pointer; } } } } } .isShow { display: none; } .tipsContent { font-size: 24px; line-height: 0; vertical-align: middle; cursor: pointer; color: #ed8b44; } ::v-deep.noSpu.xui-select .xui-input__inner { border-color: #e99fab; } ::v-deep.xui-tabs { .xui-tabs__nav-wrap { &::after { width: 20%; } .xui-tabs__nav-scroll { margin: 0 !important; .xui-tabs__item { background: none; } } } } ::v-deep .input-style { height: 34px !important; border-radius: 0 !important; } ::v-deep .xui-select__tags .xui-select-tags-inner { padding-right: 20px; } ::v-deep.xui-form-item { &.company-name { .xui-select-mutiple-clearable, .xui-tag__close { display: none; } } &.store { .xui-tag__text { max-width: 120px !important; } } .xui-form-item__content { white-space: nowrap; } } ::v-deep.forbidDel i.xui-tag__close.far.fa-times { display: none; } ::v-deep.customerSelect .xui-select-mutiple-clearable { display: none; } ::v-deep.customerSelect.xui-select .xui-select__tags.xui-select--prefix { padding-left: 0; } .titleSpan { max-width: 265px; display: inline-block; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; } </style> <style lang="scss"> .xui-select-dropdown.is-multiple { &.industry { max-width: 257px; } .xui-select-dropdown__item.selected { color: #1d1e28; } } .customerSelectPopper .xui-checkbox { float: left; } .customerSelectPopper .xui-scrollbar__bar.is-horizontal.scrollbar-bar_show { display: none; } .customerSelectPopper .xui-scrollbar .xui-scrollbar__bar.scrollbar-bar_show { height: calc(100% - 42px); } .customerSelectPopper ul.xui-scrollbar__view.xui-select-dropdown__list { position: inherit !important; } .customerSelectPopper.xui-select-dropdown .xui-tree { padding-bottom: 42px; } .operate-manage__custom-tree { flex: 1; display: flex; align-items: center; justify-content: space-between; font-size: 12px; padding-right: 8px; height: 100%; width: 90%; &-self { display: inline-block; width: 99.99%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } } .store-repair-play { display: flex; justify-content: space-between; padding-bottom: 20px; } .store-repair-info-content { flex: 1; width: 593.75px; font-size: 12px; color: #000000; text-align: left; font-weight: 400; } .store-repair-info-no { width: 134px; text-align: right; margin-right: 5px; } .store-repair-info-no { font-size: 12px; color: #7c7c7c; text-align: right; font-weight: 400; } .product-selection.xui-select .xui-select__tags.xui-select--prefix { padding-left: 0; } .xui-select .all-box { margin-top: 4px; margin-left: -8px; height: 24px; line-height: 24px; } .xui-select .all-box .xui-tag { height: 24px; z-index: 9; } .xui-select .all-box .xui-tag .far.fa-times { line-height: 23px; } .xui-select.selectAll .xui-tag.xui-tag--small { display: none; } .xui-select.selectAll .all-box .xui-tag.xui-tag--small { display: block; } .spu-tree-select .xui-scrollbar__bar.is-horizontal.scrollbar-bar_show { display: none; } .spu-tree-select .xui-scrollbar .xui-scrollbar__bar.scrollbar-bar_show { height: calc(100% - 42px); } .spu-tree-select ul.xui-scrollbar__view.xui-select-dropdown__list { position: inherit !important; } .spu-tree-select.xui-select-dropdown .xui-tree { padding-bottom: 42px; } .tree-all-select { position: absolute; width: 100%; height: 40px; line-height: 40px; bottom: 0; background: #fff; z-index: 9; padding: 0 21px; border-top: 1px solid #e8e9e8; color: #1d1e28; } .edm-upload-box { width: 83%; white-space: normal; } .edoc-upload-file-list { width: 83%; } </style> totalTableDataList3原来有storePrototypeNumber 属性,但是getNumber函数触发时要更新storePrototypeNumber 属性,并且更新页面上的数据,怎么处理
最新发布
11-09
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值