Flex开发总结--->完善中

                                                                Flex开发总结

  1、  介绍:虽然我们对java,js,html都很熟悉了,但是flex还是有很多地方需要我们注意,以免遇到问题就纠结半天,时间就白白浪费了,我将我在开发中遇到的技术点,易错点,常用点全部记录下来,这需要一个过程了,大家看了博客后有什么技术点可以留言,希望能越来越完善分享给大家。有什么问题可以加下面QQ:

Java-QQ群:180258862; 

2、tree:实现数据绑定,默认选中菜单,自动展开菜单

    <fx:XML id="dp">
<root>
<node label="环保局">
<node label="环境监测部" >
<node label="陈" />
</node>
<node label="环境统计部">
<node label="张" />
<node label="钟" />
</node>
<node label="环境监察部">
<node label="霍" />
<node label="徐" />
</node>
</node>
</root>
</fx:XML>


<mx:Tree x="0" y="52" width="100%" height="100%" id="trees" dataProvider="{dp}" selectedIndex="0" openItems="{dp.node[0]}"
showRoot="false" labelField="@label"  useRollOver="true"   verticalAlign="top"></mx:Tree>

 

3、combox数据绑定:
  
   private var dp:ArrayCollection = new ArrayCollection([{cmbx_lblfield:"许爱你"},{cmbx_lblfield:"小名"}]);

        dp.addItem({cmbx_lblfield:"动态添加数据"});

 <mx:ComboBox  width="106" id="nd" dataProvider="{dp}" selectedIndex="4" labelField="cmbx_field" ></mx:ComboBox>

4、获取浏览器的高度和宽度:

          this.stage.stageWidth;

           this.stage.stageHeight;

5、Alert点击了取消按钮还是确定按钮,如果是确定按钮就触发事件:

      private  function  alt():void{

          Alert.show("确定提交吗?","系统提示",Alert.OK|Alert.NO,this,method);

    }

  private function method(e:CloseEvent):void{

              if(e.detail==Alert.OK)
             {

            }

     }

6、打开一个界面并居中显示:

    var scu:titlewindow=new titlewindow();
    scu.x = (this.stage.stageWidth-scu.width)/2;
    scu.y = (this.stage.stageHeight-scu.height)/2;
    PopUpManager.addPopUp(scu,this,true);

7、日期选择器(支持中文、年份选择):

<mx:DateField  id="date" yearNavigationEnabled=true formatString="YYYY-MM-DD" dayNames="[日,一,二,三,四,五,六]"  monthNames="[一,二,三,四,五,六,七,八,九,十,十一,十二]" />

8、双击事件的实现:

   btn.doubleClickEnabled = true;
   btn.addEventListener(MouseEvent.DOUBLE_CLICK,double_grid);

<mx:button id="btn" >

  9、2个界面数据交互:

  界面一代码Page1.mxml:

private  var xzqdm:Page2= null;
   private function select_Page2():void
   {
       xzqdm = new Page2();
       xzqdm.x = (this.stage.stageWidth-xzqdm.width)/2;
       xzqdm.y = (this.stage.stageHeight-xzqdm.height)/2;
       xzqdm.addEventListener("clickXzqdm",getParam);
       PopUpManager.addPopUp(xzqdm,this,true);
   }
   public function getParam(e:Event):void
   {
     var result:String = xzqdm.abc;
   }

 

 界面二代码Page2.mxml:

 private var abc:String="你好";

   private function double_grid(event:MouseEvent)
     {
      var outgoingEvent:Event = new Event("clickXzqdm", true);
      dispatchEvent(outgoingEvent);
      PopUpManager.removePopUp(this);
     }

 10、界面布局:使用vbox和hbox布局。

11、得到datagrid表格选中的值:

var str:String = this.dg.selectedItem["NAME"].toString();

<mx:DataGrid width="100%" height="100%" id="dg" dataProvider="{pageList}" click="dg_click()">
  <mx:columns>
   <mx:DataGridColumn headerText="姓名" dataField="NAME"/>
 </mx:DataGrid>

12、加载xml文件:

<mx:XML xmlns="" id="dataProviderXML" source="chinaArea.xml" />

13、函数初始化:

<mx:TitleWindow xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
  width="932" height="1710" creationComplete="init()" >

<mx:Script>
 <![CDATA[

 private function init():void{

  Alert.show("初始化");
     }

 ]]>
</mx:Script>

</mx:TitleWindow/>

14、Java中的集合和flex中的集合互相转换

flex中的键值集合:  var whereValue:Object = new Object();  whereValue={CODE:“你好”};

java中的键值集合:   Map<String, String> where = new HashMap<String, String>();

如果Java中的函数参数是map对象,在flex中直接传Object的键值格式给Java就行。

flex中的Array数组:var arr:Array =["Java","flex"];

java中的数组:  String[] str = ["java",,"felx"];

如果Java函数返回值是string[],那么在flex中用获取

private function getZiDuan(event:ResultEvent):void
   {
       var arr:Array =  event.result as Array;
           for(var c:int=0;arr.length>c;c++){
          try{ 
            var str:String = arr[c].toString();
          }catch(e:Error){
           continue;
          }
          } 

  }

15、flex中的异常处理机制try{}catch(){}: 

private function getZiDuan():void
   { try{var str:String = null;}catch(e:Error){Alert.show(e.message); }   }

16、获取ID2中方法:

this["txt_nihao"].text = "你好";  //动态给不确定的id赋值

txt_nihao.text="你好";//给固定的id赋值

<mx:TextInput id="txt_nihao"/>

17、flex和Java交互Ablanzd:

  <mx:RemoteObject id="simpleService" destination="SimpleService">
         <mx:method name="select" concurrency="last"  result="select_result(event)" fault="fault_result(event)"/>
</mx:RemoteObject>

private  function fault_result(event:FaultEvent):void
    {
       Alert.show("连接到服务器出现异常!"+event.result);
    }

private function getZiDuan(event:ResultEvent):void
   {
      var arr:Array=  event.result as Array;
  
   }

  private function init():void{
       simpleService.method("你好");  //method是Java中的方法
     }

<mx:button  click="init()" label="点击"/>

18、反射,将从数据中获取的值绑定到多文本框,请慢慢看下下面代码,非常有用的;

注意:文本框的id必须要有相应规律,比如id="txt_数据库字段名_阿拉伯数字":

//columnValue要比对的值,resultArr数据库中的值(对应Java中的格式List<Map<String, Object>>)

 private function getProperty(columnValue:String,resultArr:ArrayCollection):String{ //如果返回值是result变量,那么string可以改成Object
           var result:Object=null;
           var temp:Object =null;
           for(var i:int=0;i<resultArr.length;i++){
            temp=resultArr[i];
            if( temp["CODE"]==columnValue){//CODE是数据库表的字段
             result=temp;
             break;
            }
           }
           return result["NAME"]; //获取到数据库中Name字段的值
          } 

//result是数组,temps是id编号(id='txt_1',id="txt_2",那么temps可以等于1或者2)

  private function setProperty(result:Object,temps:String):void{
       var tInput:TextInput=null;
      var temp:String="";
      for each(var columnName:String in array_columnName){
       try{
        tInput=this[columnName+"_"+temps];
       }catch(e:Error) {
        continue;
       }
       temp=result[columnName];
       if(tInput==null){
       }else{
       if(temp==null){
       }else{
        tInput.text=temp;
       }
      }
     }
    }

var resultObjectG1:Object=this.getProperty("G1","1",result_data);var resultObjectG1:Object=this.getProperty("G1","1",result_data);var resultObjectG1:Object=this.getProperty("G1","1",result_data);var resultObjectG1:Object=this.getProperty("G1","你好",result_data);//result_data 是数据库中获取的多行数据,G1是数据库表字段名,得到G1="你好"的数据

this.setProperty(resultObjectG1,“id”);//绑定数据

19、移除DataGrid的行

 for(var a:int=4; 10>a;a++){ //假设有10行
            this.grid.removeChildAt(4);  //每次移除第5行;不能写成this.grid.removeChildAt(a);
        }

 20、<flexlib:TreeGrid>运用:这是google的一个框架;在开发中运用多。

<mx:XML xmlns="" id="dataProviderXML" source="cqtk/wp/chinaArea.xml" />

 <flexlib:TreeGrid
   openItems="{dataProviderXML.node[0]}"
   itemClick="treegridItemClickHandler(event)"
   styleName="datagridStyle"
   headerStyleName="dataGridHeader"
   width="100%" height="100%"
   dataProvider="{ dataProviderXML }"
   paddingLeft="25"
   verticalTrunks="normal"
   rowHeight="30"
    showRoot="false"
   disclosureClosedIcon="@Embed(source='cqtk/wp/image/tree_openNode.png')"
   disclosureOpenIcon="@Embed(source='cqtk/wp/image/tree_closeNode.png')"
   folderClosedIcon="@Embed(source='cqtk/wp/image/status.png')"
   folderOpenIcon="@Embed(source='cqtk/wp/image/status.png')"
   id="grid_xzq"> 
   <flexlib:columns>
    <flexlib:TreeGridColumn dataField="@name" headerText="行政区名称" />
    <mx:DataGridColumn dataField="@id" headerText="行政区代码" />
   </flexlib:columns>
   
  </flexlib:TreeGrid>

21、加载配置文件:

private var currentNode:XML ;

 private function init_chinaArea_xml():void
   {
       var url:URLRequest = new URLRequest("cqtk/wp/chinaArea.xml");
       var loader:URLLoader = new URLLoader();
       loader.addEventListener(Event.COMPLETE,xml_complete);
       loader.load(url);
  
   }
   private function xml_complete(event:Event):void
   {
     var result:URLLoader = URLLoader(event.target);
     areaDatas = XML(result.data)
   }

 22、flex图片根据浏览器大小自动适应:

  <mx:Image source="@Embed(source='wawaw.jpg')" width="100%" height="100%" id="top_image" scaleContent="true" maintainAspectRatio="false" />

 23、非常不错的flex实例网站:

       A.  http://blog.minidx.com/2008/03/23/626.html (flex事例网站)

       B. 中国开源社区

      C.http://resources.esri.com/help/9.3/arcgisserver/apis/flex/samples/index.html   在线arcGis for flex API

      D.Flex样式生成工具.swf

24、常用的flex第三方组建:

     agslib-1.3-2009-10-31.swc   用于mapArcgis for flex3.0开发      

    flex3d.swc ,CoverFlow_lib.swc   第3方特效,一般用于相册

     flexiframe.swc  flex框架,可以支持html文件引用

     FlexPaper.swc   文档在线浏览

     pageGrid.swc   用于dategrid表格分页,自动分页,不用自己去分页了

    IConUtility.as  用于加载图片,可以到百度下载该文件。(原来用法:[Embed(source="1.png")] private var myicon:Class;)

                              (现在用法:var Button btns = new Buttons; btns.setStyle("icon", IconUtility.getClass(btns, "1.png", 40, 40));)

25、eclipse的flex代码格式化工具:FlexPrettyPrintCommand_0.9.0

26、flex中Image对象无法加载中文路径:从数据库中获取的图片路径在Image对象中无法显示,调试了很久,发现不支持中文路径

     var img:Image = new Image();

    //第一种加载图片路径(中文路径); 中文路径下,图片不能显示

   //img.source="image/图片.png";

  //第二种用英文路径;

   img.source="image/image.png";

提示:flex中最好不要用中文路径,这样会导致图片无法正确显示



<div class="ivu-card-body"><div data-v-3c1c8183="" class="ivu-row"><div data-v-3c1c8183="" class="ivu-col"><div data-v-3c1c8183="" class="btnHeight ivu-row"><span data-v-3c1c8183=""><!----> <!----> <div data-v-3c1c8183="" class="table_search_int ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text"><!----> <!----> <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i> <input autocomplete="off" spellcheck="false" type="text" placeholder="考核目标" class="ivu-input ivu-input-default"> <!----></div></span><span data-v-3c1c8183=""><!----> <!----> <div data-v-3c1c8183="" class="table_search_int ivu-input-wrapper ivu-input-wrapper-default ivu-input-type-text"><!----> <!----> <i class="ivu-icon ivu-icon-ios-loading ivu-load-loop ivu-input-icon ivu-input-icon-validate"></i> <input autocomplete="off" spellcheck="false" type="text" placeholder="考核标准" class="ivu-input ivu-input-default"> <!----></div></span> <button data-v-3c1c8183="" type="button" class="btns ivu-btn ivu-btn-info" style="width: 56px;"><!----> <!----> <span><span data-v-3c1c8183=""> 查询 </span></span></button><button data-v-3c1c8183="" type="button" class="btns ivu-btn ivu-btn-primary"><!----> <!----> <span><span data-v-3c1c8183=""> 导入 </span></span></button><button data-v-3c1c8183="" type="button" class="btns ivu-btn ivu-btn-primary"><!----> <!----> <span><span data-v-3c1c8183=""> 导出 </span></span></button><button data-v-3c1c8183="" type="button" class="btns ivu-btn ivu-btn-warning"><!----> <!----> <span><span data-v-3c1c8183=""> 新增 </span></span></button><button data-v-3c1c8183="" type="button" class="btns ivu-btn ivu-btn-error"><!----> <!----> <span><span data-v-3c1c8183=""> 删除 </span></span></button></div> <div data-v-3c1c8183="" class="table-form ivu-row"><!----> <!----> <div data-v-3c1c8183="" class="ivu-table-wrapper" style="height: 200px;"><div class="ivu-table ivu-table-small ivu-table-stripe ivu-table-with-fixed-top"><!----> <div class="ivu-table-header"><table cellspacing="0" cellpadding="0" border="0" style="width: 1129px;"><colgroup><col width="60"><col width="100"><col width="100"><col width="100"><col width="340"><col width="340"><col width="80"> <col width="8"></colgroup> <thead><tr><th class="ivu-table-column-wZlaS8 ivu-table-column-center"><div class="ivu-table-cell ivu-table-cell-with-selection"><label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label></div> <!----></th><th class="ivu-table-column-04H7sV ivu-table-column-left"><div class="ivu-table-cell"><span class="">分类</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-g8LZ9i ivu-table-column-left"><div class="ivu-table-cell"><span class="">序号</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-p3XzY6 ivu-table-column-left"><div class="ivu-table-cell"><span class="">权重(%)</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-qODpHN ivu-table-column-left"><div class="ivu-table-cell"><span class="">考核目标</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-oYd3ep ivu-table-column-left"><div class="ivu-table-cell"><span class="">考核标准</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-Ig9Tbq ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-hidden"><span class="">操作</span> <!----> <!----></div> <!----></th> <th rowspan="1" class="ivu-table-hidden"></th></tr></thead></table></div> <div class="ivu-table-body ivu-table-overflowY" style="height: 163px;"><table cellspacing="0" cellpadding="0" border="0" style="width: 1121px;"><colgroup><col width="60"><col width="100"><col width="100"><col width="100"><col width="340"><col width="340"><col width="80"></colgroup><tbody class="ivu-table-tbody"><tr class="ivu-table-row"><td class="ivu-table-column-wZlaS8 ivu-table-column-center"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">关键业务指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">1</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">20</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="position: absolute; will-change: top, left; display: none; top: 37px; left: 567px;" x-placement="top"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①在2024年X月X日前,完成包括考核目标内的其他模块开发交付,且无bug,为优秀;②在2024年X月X日前,完成考核目标要求的模块开发交付,且无bug,为合格;③2024年X月X日未完成考核目标要求的模块开发交付,或完成后出现bug,为不足</span></div></div> <!----></div></td><td class="ivu-table-column-Ig9Tbq ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-hidden"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-wZlaS8 ivu-table-column-center"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">关键业务指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">2</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">20</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="position: absolute; will-change: top, left; display: none; top: 78px; left: 567px;" x-placement="top"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①在2024年X月X日前,完成包括考核目标内的其他模块开发交付,且无bug,为优秀;②在2024年X月X日前,完成考核目标要求的模块开发交付,且无bug,为合格;③2024年X月X日未完成考核目标要求的模块开发交付,或完成后出现bug,为不足</span></div></div> <!----></div></td><td class="ivu-table-column-Ig9Tbq ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-hidden"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-wZlaS8 ivu-table-column-center"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">关键业务指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">3</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">20</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="position: absolute; will-change: top, left; display: none; top: 118px; left: 567px;" x-placement="top"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①在2024年X月X日前,完成包括考核目标内的其他模块开发交付,且无bug,为优秀;②在2024年X月X日前,完成考核目标要求的模块开发交付,且无bug,为合格;③2024年X月X日未完成考核目标要求的模块开发交付,或完成后出现bug,为不足</span></div></div> <!----></div></td><td class="ivu-table-column-Ig9Tbq ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-hidden"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-wZlaS8 ivu-table-column-center"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">关键业务指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">4</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">20</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="position: absolute; will-change: top, left; display: none; top: 159px; left: 567px;" x-placement="top"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①在2024年X月X日前,完成包括考核目标内的其他模块开发交付,且无bug,为优秀;②在2024年X月X日前,完成考核目标要求的模块开发交付,且无bug,为合格;③2024年X月X日未完成考核目标要求的模块开发交付,或完成后出现bug,为不足</span></div></div> <!----></div></td><td class="ivu-table-column-Ig9Tbq ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-hidden"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-wZlaS8 ivu-table-column-center"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">价值观指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">5</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">10</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">试用期内进入XX项目,并通过客户考核</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="display: none;"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">试用期内进入XX项目,并通过客户考核</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①通过则合格②未通过且未进入其他项目的为不合格,原则上不能转正。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="display: none;"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">①通过则合格②未通过且未进入其他项目的为不合格,原则上不能转正。</div></div></div></div> <!----></div></td><td class="ivu-table-column-Ig9Tbq ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-hidden"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-wZlaS8 ivu-table-column-center"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">价值观指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">6</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">10</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">综合素质</span></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①积极主动,责任心强,严格自律,能自觉遵守公司各项规章制度; ②接受任务主动,责任心较强,能较准确接受上级指示,遵守公司的各项规章制度; ③接受任务不主动,责任心不强,有违纪现象。 ④能主动积极与本部门其他成员建立良好的协作关系,保持良好的团队合作气氛;与部门外、公司外人员,建立良好的人际关系,促进业务上的沟通; ⑤能与其他成员建立较好的协作关系,保持较好的团队合作气氛;与部门外、公司外人员,建立较好的人际关系,促进业务沟通; ⑥不能很好保持的团队合作气氛;与部门内、外、公司外人员,人际关系较弱,不能很好促进工作沟通。 ⑦为人礼貌、正直、豁达,能实事求是阐述问题,有良好的适应能力,能很快加入公司的团队,能主动更新业务知识; ⑧为人诚实,较能实事求是阐述问题,有较好的适应能力,融入公司的团队较快,更新业务知识较强; ⑨有一定性格问题,阐述问题有片面性,适应能力较弱,融入公司的团队较难,不能主动更新业务知识。</span></div></div> <!----></div></td><td class="ivu-table-column-Ig9Tbq ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-hidden"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td></tr></tbody></table></div> <!----> <div class="ivu-table-tip" style="height: 163px; display: none;"><table cellspacing="0" cellpadding="0" border="0"><tbody><tr><td style="width: 1130px; height: 163px;"><span>暂无筛选结果</span></td></tr></tbody></table></div> <!----> <div class="ivu-table-fixed-right" style="width: 80px; right: 8px;"><div class="ivu-table-fixed-header"><table cellspacing="0" cellpadding="0" border="0" style="width: 80px; right: 8px;"><colgroup><col width="80"><col width="60"><col width="100"><col width="100"><col width="100"><col width="340"><col width="340"> <col width="8"></colgroup> <thead><tr><th class="ivu-table-column-Ig9Tbq ivu-table-column-center"><div class="ivu-table-cell"><span class="">操作</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-wZlaS8 ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-cell-with-selection"><label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label></div> <!----></th><th class="ivu-table-column-04H7sV ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><span class="">分类</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-g8LZ9i ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><span class="">序号</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-p3XzY6 ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><span class="">权重(%)</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-qODpHN ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><span class="">考核目标</span> <!----> <!----></div> <!----></th><th class="ivu-table-column-oYd3ep ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><span class="">考核标准</span> <!----> <!----></div> <!----></th> <th rowspan="1" class="ivu-table-hidden"></th></tr></thead></table></div> <div class="ivu-table-fixed-body" style="height: 162px;"><table cellspacing="0" cellpadding="0" border="0" style="width: 80px; right: 8px;"><colgroup><col width="80"><col width="60"><col width="100"><col width="100"><col width="100"><col width="340"><col width="340"></colgroup><tbody class="ivu-table-tbody"><tr class="ivu-table-row"><td class="ivu-table-column-Ig9Tbq ivu-table-column-center"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td><td class="ivu-table-column-wZlaS8 ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">关键业务指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">1</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">20</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="display: none;"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①在2024年X月X日前,完成包括考核目标内的其他模块开发交付,且无bug,为优秀;②在2024年X月X日前,完成考核目标要求的模块开发交付,且无bug,为合格;③2024年X月X日未完成考核目标要求的模块开发交付,或完成后出现bug,为不足</span></div></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-Ig9Tbq ivu-table-column-center"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td><td class="ivu-table-column-wZlaS8 ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">关键业务指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">2</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">20</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="display: none;"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①在2024年X月X日前,完成包括考核目标内的其他模块开发交付,且无bug,为优秀;②在2024年X月X日前,完成考核目标要求的模块开发交付,且无bug,为合格;③2024年X月X日未完成考核目标要求的模块开发交付,或完成后出现bug,为不足</span></div></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-Ig9Tbq ivu-table-column-center"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td><td class="ivu-table-column-wZlaS8 ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">关键业务指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">3</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">20</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="display: none;"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①在2024年X月X日前,完成包括考核目标内的其他模块开发交付,且无bug,为优秀;②在2024年X月X日前,完成考核目标要求的模块开发交付,且无bug,为合格;③2024年X月X日未完成考核目标要求的模块开发交付,或完成后出现bug,为不足</span></div></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-Ig9Tbq ivu-table-column-center"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td><td class="ivu-table-column-wZlaS8 ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">关键业务指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">4</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">20</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="display: none;"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">考核目标需要SMART化;例如:在XX时间按XX标准完成XX项目交付。</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①在2024年X月X日前,完成包括考核目标内的其他模块开发交付,且无bug,为优秀;②在2024年X月X日前,完成考核目标要求的模块开发交付,且无bug,为合格;③2024年X月X日未完成考核目标要求的模块开发交付,或完成后出现bug,为不足</span></div></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-Ig9Tbq ivu-table-column-center"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td><td class="ivu-table-column-wZlaS8 ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">价值观指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">5</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">10</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">试用期内进入XX项目,并通过客户考核</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="display: none;"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">试用期内进入XX项目,并通过客户考核</div></div></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div class="ivu-tooltip"><div class="ivu-tooltip-rel"><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①通过则合格②未通过且未进入其他项目的为不合格,原则上不能转正。</span></div></div> <div class="ivu-tooltip-popper ivu-tooltip-dark" style="display: none;"><div class="ivu-tooltip-content"><div class="ivu-tooltip-arrow"></div> <div class="ivu-tooltip-inner">①通过则合格②未通过且未进入其他项目的为不合格,原则上不能转正。</div></div></div></div> <!----></div></td></tr><tr class="ivu-table-row"><td class="ivu-table-column-Ig9Tbq ivu-table-column-center"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><button type="button" class="ivu-btn ivu-btn-success ivu-btn-small" style="display: inline-block;"><!----> <!----> <span>编辑</span></button></div> <!----></div></td><td class="ivu-table-column-wZlaS8 ivu-table-column-center ivu-table-hidden"><div class="ivu-table-cell ivu-table-cell-with-selection"><!----> <label class="ivu-checkbox-wrapper ivu-checkbox-default"><span class="ivu-checkbox"><span class="ivu-checkbox-inner"></span> <input type="checkbox" class="ivu-checkbox-input"></span> <!----></label> <!----> <!----> <!----> <!----> <!----> <!----> <!----></div></td><td class="ivu-table-column-04H7sV ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">价值观指标</span></div></div> <!----></div></td><td class="ivu-table-column-g8LZ9i ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">6</span></div></div> <!----></div></td><td class="ivu-table-column-p3XzY6 ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">10</span></div></div> <!----></div></td><td class="ivu-table-column-qODpHN ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">综合素质</span></div></div> <!----></div></td><td class="ivu-table-column-oYd3ep ivu-table-column-left ivu-table-hidden"><div class="ivu-table-cell"><!----> <!----> <!----> <!----> <!----> <!----> <!----> <div><div style="width: 100%; height: 40px; line-height: 40px; text-align: center; display: flex; align-items: center;"><span style="display: inline-block; font-size: 12px; vertical-align: middle;">①积极主动,责任心强,严格自律,能自觉遵守公司各项规章制度; ②接受任务主动,责任心较强,能较准确接受上级指示,遵守公司的各项规章制度; ③接受任务不主动,责任心不强,有违纪现象。 ④能主动积极与本部门其他成员建立良好的协作关系,保持良好的团队合作气氛;与部门外、公司外人员,建立良好的人际关系,促进业务上的沟通; ⑤能与其他成员建立较好的协作关系,保持较好的团队合作气氛;与部门外、公司外人员,建立较好的人际关系,促进业务沟通; ⑥不能很好保持的团队合作气氛;与部门内、外、公司外人员,人际关系较弱,不能很好促进工作沟通。 ⑦为人礼貌、正直、豁达,能实事求是阐述问题,有良好的适应能力,能很快加入公司的团队,能主动更新业务知识; ⑧为人诚实,较能实事求是阐述问题,有较好的适应能力,融入公司的团队较快,更新业务知识较强; ⑨有一定性格问题,阐述问题有片面性,适应能力较弱,融入公司的团队较难,不能主动更新业务知识。</span></div></div> <!----></div></td></tr></tbody></table></div> <!----></div> <div class="ivu-table-fixed-right-header" style="width: 8px; height: 38px;"></div> <!----></div> <div class="ivu-table-resize-line" style="display: none;"></div> <!----> <!----><object tabindex="-1" type="text/html" data="about:blank" style="display: block; position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: none; padding: 0px; margin: 0px; opacity: 0; z-index: -1000; pointer-events: none;"></object></div></div> <div data-v-3c1c8183="" class="ivu-row-flex"><ul data-v-3c1c8183="" class="ivu-page mini"><!----> <li title="上一页" class="ivu-page-prev ivu-page-disabled"><a><i class="ivu-icon ivu-icon-ios-arrow-back"></i></a></li> <li title="1" class="ivu-page-item ivu-page-item-active"><a>1</a></li> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <!----> <li title="下一页" class="ivu-page-next ivu-page-disabled"><a><i class="ivu-icon ivu-icon-ios-arrow-forward"></i></a></li> <div class="ivu-page-options"><div class="ivu-page-options-sizer"><div class="ivu-select ivu-select-single ivu-select-small"><div tabindex="0" class="ivu-select-selection"><input type="hidden" value="10"> <div class=""><!----> <!----> <span class="ivu-select-selected-value">10 条/页</span> <!----> <!----> <i class="ivu-icon ivu-icon-ios-arrow-down ivu-select-arrow"></i></div></div> <div class="ivu-select-dropdown" style="display: none; min-width: 85px; position: absolute; will-change: top, left; transform-origin: center bottom; z-index: 10002; top: 242px; left: 132px;" x-placement="top"><ul class="ivu-select-not-found" style="display: none;"><li>无匹配数据</li></ul> <ul class="ivu-select-dropdown-list"><!----> <li class="ivu-select-item ivu-select-item-selected" style="text-align: center;">10 条/页</li><li class="ivu-select-item" style="text-align: center;">20 条/页</li><li class="ivu-select-item" style="text-align: center;">50 条/页</li><li class="ivu-select-item" style="text-align: center;">100 条/页</li></ul> <ul class="ivu-select-loading" style="display: none;">加载中</ul></div></div></div> <div class="ivu-page-options-elevator"> 跳至 <input type="text" autocomplete="off" spellcheck="false"> 页 </div></div></ul> <span data-v-3c1c8183="" style="margin-left: 10px; margin-top: 2px;"> 第 1 - 6 共 <span data-v-3c1c8183="">6</span></span> <button data-v-3c1c8183="" type="button" class="refresh ivu-btn ivu-btn-default ivu-btn-circle ivu-btn-small ivu-btn-icon-only"><!----> <i class="ivu-icon ivu-icon-md-refresh"></i> <!----></button></div></div></div></div> 1 document.querySelector("div.cover .dataContent .ivu-col .ivu-card-body "); 打印如上面的html 结构 2 完善查询 找到导入按钮
最新发布
08-26
<template> <view class="detail-container"> <!-- 顶部索引板块 --> <view class="index-card"> <u-form :model="formData" ref="indexForm" class="mobile-form"> <!-- 问卷标题 --> <u-form-item label="问卷标题:" prop="dcWjTitle" label-width="150rpx"> <u-input v-model="formData.dcWjTitle" placeholder="请输入问卷标题" clearable border="bottom" prefixIcon="file-text" /> </u-form-item> <!-- 被测评人 --> <u-form-item label="被测评人:" prop="dcId" label-width="150rpx"> <u-select v-model="formData.dcId" :list="bdrOptions" multiple value-name="dcId" label-name="dcName" @confirm="handleBdrSelect" placeholder="请选择被测评人" ></u-select> </u-form-item> <!-- 人员部门 --> <u-form-item label="人员部门:" prop="dcDept" label-width="150rpx"> <u-input v-model="formData.dcDept" placeholder="请输入人员部门" clearable border="bottom" prefixIcon="home" /> </u-form-item> <!-- 人员状态 --> <u-form-item label="人员状态:" prop="state" label-width="150rpx"> <u-select v-model="formData.state" :list="stateOptions" value-name="value" label-name="label" placeholder="请选择提交状态" ></u-select> </u-form-item> <!-- 按钮区域 --> <view class="button-group"> <u-button type="primary" @click="handleSearch" class="action-button" icon="search" > 搜索 </u-button> <u-button @click="handleReset" class="action-button" icon="reload" > 重置 </u-button> </view> </u-form> </view> <!-- 数据显示区域 --> <view class="data-card"> <view class="card-header"> <u-button type="primary" size="small" icon="reload" @click="fetchData" > 刷新数据 </u-button> </view> <view class="card-container"> <!-- 数据加载状态 --> <u-loading-page :loading="loading" loadingText="加载中..." /> <!-- 数据卡片 --> <view v-for="(item, index) in tableData" :key="item.dcWjId" class="data-card-item" > <!-- 顶部:问卷标题 --> <view class="card-header-section"> <view class="card-title">{{ item.dcWjTitle }}</view> </view> <!-- 中间:其他数据 --> <view class="card-body-section"> <view class="card-row"> <text class="card-label">被测评人:</text> <text class="card-value">{{ item.dcName }}</text> </view> <view class="card-row"> <text class="card-label">部门:</text> <text class="card-value">{{ item.dcDept }}</text> </view> <view class="card-row"> <text class="card-label">创建时间:</text> <text class="card-value">{{ item.createTime }}</text> </view> <view class="card-row"> <text class="card-label">提交时间:</text> <text class="card-value">{{ item.updateTime || '-' }}</text> </view> </view> <!-- 底部:状态和操作按钮 --> <view class="card-footer-section"> <view class="status-container"> <u-tag :text="item.state === '1' ? '已提交' : '未提交'" :type="item.state === '1' ? 'success' : 'info'" /> <view class="score">总分: {{ item.score || '0' }}</view> </view> <u-button size="small" type="primary" @click="handleView(item)" class="action-btn" > 编辑/查看 </u-button> </view> </view> <!-- 空数据提示 --> <u-empty v-if="tableData.length === 0" mode="data" /> </view> <!-- 分页控件 --> <view class="pagination-container"> <u-pagination v-model="pagination.current" :itemsPerPage="pagination.size" :total="pagination.total" :showTotal="true" @change="handlePageChange" /> </view> </view> </view> </template> <script> import { ref, reactive, onMounted } from 'vue'; import { onLoad } from '@dcloudio/uni-app'; export default { setup() { // 环境变量管理API地址 - 使用uni-app兼容方式 const API_BASE = 'http://172.26.26.43/dev-api'; // 替换为实际API地址 const API_URL = `${API_BASE}/wjdc/wj/listTx`; const BDR_API_URL = `${API_BASE}/wjdc/wj/getBdrList`; // 状态选项 const stateOptions = ref([ { label: '已提交', value: 1 }, { label: '未提交', value: 0 } ]); // 被测评人相关数据 const bdrOptions = ref([]); // 被测评人选项列表 const bdrLoading = ref(false); // 加载状态 const bdrCache = ref([]); // 缓存所有被测评人数据 // 表单数据 const formData = reactive({ dcWjTitle: '', dcId: [], dcDept: '', state: null }); // 表格数据 const tableData = ref([]); const loading = ref(false); // 分页配置 const pagination = reactive({ current: 1, size: 10, total: 0 }); // 表单引用 const indexForm = ref(null); // 处理被测评人选择 const handleBdrSelect = (selected) => { formData.dcId = selected.map(item => item.value); }; // 获取被测评人列表 const fetchBdrList = async () => { const token = getAuthToken(); if (!token) return; bdrLoading.value = true; try { const [err, res] = await uni.request({ url: BDR_API_URL, method: 'GET', header: { 'Authorization': `Bearer ${token}` } }); if (err) { throw new Error(err.errMsg || '请求失败'); } const data = res.data; if (data && data.code === 200) { bdrCache.value = data.data || []; bdrOptions.value = bdrCache.value.map(item => ({ value: item.dcId, label: item.dcName })); } else { const msg = data?.msg || '返回数据格式不正确'; uni.showToast({ title: '获取被测评人列表失败: ' + msg, icon: 'none' }); } } catch (error) { console.error('获取被测评人列表失败:', error); uni.showToast({ title: '获取被测评人列表失败: ' + error.message, icon: 'none' }); } finally { bdrLoading.value = false; } }; const token = getAuthToken(); if (!token) return; bdrLoading.value = true; try { const response = await uni.request({ url: BDR_API_URL, method: 'GET', params: { pageNum: pagination.current, pageSize: pagination.size, ...formData, dcId: formData.dcId.join(',') }, header: { 'Authorization': `Bearer ${token}` } }); const data = response[1].data; if (data && data.code === 200) { bdrCache.value = data.data || []; bdrOptions.value = bdrCache.value.map(item => ({ value: item.dcId, label: item.dcName })); } else { const msg = data?.msg || '返回数据格式不正确'; uni.showToast({ title: '获取被测评人列表失败: ' + msg, icon: 'none' }); } } catch (error) { console.error('获取被测评人列表失败:', error); uni.showToast({ title: '获取被测评人列表失败', icon: 'none' }); } finally { bdrLoading.value = false; } }; // 获取认证令牌 const getAuthToken = () => { const token = uni.getStorageSync('token'); if (!token) { uni.showToast({ title: '请先登录', icon: 'none' }); uni.navigateTo({ url: '/pages/login/login' }); return null; } return token; }; // 搜索按钮处理函数 const handleSearch = () => { // 检查被测评人选择数量 if (formData.dcId.length > 1) { uni.showToast({ title: '当前只能搜索一个被测人员', icon: 'none', duration: 3000 }); return; } pagination.current = 1; fetchData(); }; // 重置按钮处理函数 const handleReset = () => { formData.dcWjTitle = ''; formData.dcId = []; formData.dcDept = ''; formData.state = null; handleSearch(); }; // 编辑/查看 const handleView = (row) => { uni.navigateTo({ url: `/pages/operation/operation?id=${row.dcWjId}` }); }; // 页码改变 const handlePageChange = (page) => { pagination.current = page; fetchData(); }; // 获取数据 const fetchData = async () => { const token = getAuthToken(); if (!token) return; loading.value = true; try { const params = { pageNum: pagination.current, pageSize: pagination.size, ...formData, dcId: formData.dcId.join(',') }; const [err, res] = await uni.request({ url: API_URL, method: 'GET', data: params, header: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } }); if (err) { throw new Error(err.errMsg || '请求失败'); } const data = res.data; if (data && data.code === 200) { tableData.value = data.rows || []; pagination.total = data.total || 0; if (tableData.value.length === 0) { uni.showToast({ title: '没有找到匹配的数据', icon: 'none' }); } } else { const errorMsg = data?.msg || '未知错误'; console.error('API返回错误:', errorMsg); uni.showToast({ title: `请求失败: ${errorMsg}`, icon: 'none' }); tableData.value = []; pagination.total = 0; } } catch (error) { // ... 错误处理 ... } finally { loading.value = false; } }; const token = getAuthToken(); if (!token) return; loading.value = true; try { const params = { pageNum: pagination.current, pageSize: pagination.size, ...formData, dcId: formData.dcId.join(',') }; const response = await uni.request({ url: API_URL, method: 'GET', data: params, header: { 'Content-Type': 'application/json', 'Authorization': `Bearer ${token}` } }); const data = response[1].data; if (data && data.code === 200) { tableData.value = data.rows || []; pagination.total = data.total || 0; if (tableData.value.length === 0) { uni.showToast({ title: '没有找到匹配的数据', icon: 'none' }); } } else { const errorMsg = data?.msg || '未知错误'; console.error('API返回错误:', errorMsg); uni.showToast({ title: `请求失败: ${errorMsg}`, icon: 'none' }); tableData.value = []; pagination.total = 0; } } catch (error) { // 安全地访问错误属性 const statusCode = error.statusCode || error.errMsg?.match(/status code (\d+)/)?.[1]; if (statusCode === '401') { uni.showToast({ title: '认证过期,请重新登录', icon: 'none' }); uni.removeStorageSync('token'); uni.navigateTo({ url: '/pages/login/login' }); return; } console.error('获取数据失败:', error); // 安全地获取错误信息 let errorMsg = '网络请求失败'; if (error.errMsg) { errorMsg = error.errMsg; } else if (error.message) { errorMsg = error.message; } else if (typeof error === 'string') { errorMsg = error; } uni.showToast({ title: `请求失败: ${errorMsg}`, icon: 'none' }); tableData.value = []; pagination.total = 0; } finally { loading.value = false; } }; onMounted(() => { fetchBdrList(); fetchData(); }); return { formData, bdrOptions, stateOptions, tableData, loading, pagination, indexForm, handleBdrSelect, handleSearch, handleReset, handleView, handlePageChange, fetchData }; } }; </script> <style> .detail-container { padding: 20rpx; background-color: #f8f8f8; min-height: 100vh; } .index-card { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05); } .mobile-form .u-form-item { margin-bottom: 32rpx; } .mobile-form .u-input, .mobile-form .u-select { background: #f8f8f8; border-radius: 12rpx; padding: 20rpx; margin-top: 12rpx; } .button-group { display: flex; justify-content: space-between; margin-top: 24rpx; } .button-group .action-button { flex: 1; margin: 0 12rpx; height: 80rpx; border-radius: 12rpx; font-size: 32rpx; } .data-card { background: #fff; border-radius: 16rpx; padding: 24rpx; box-shadow: 0 4rpx 24rpx rgba(0, 0, 0, 0.05); } .data-card .card-header { margin-bottom: 24rpx; display: flex; justify-content: flex-end; } .card-container .data-card-item { background: #fff; border-radius: 16rpx; padding: 24rpx; margin-bottom: 24rpx; border: 1rpx solid #eee; box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05); } .card-container .card-header-section { padding-bottom: 20rpx; border-bottom: 1rpx solid #f0f2f5; margin-bottom: 20rpx; } .card-container .card-header-section .card-title { font-size: 34rpx; font-weight: bold; color: #333; } .card-container .card-body-section { margin-bottom: 20rpx; } .card-container .card-row { display: flex; margin-bottom: 16rpx; font-size: 30rpx; line-height: 1.6; } .card-container .card-label { color: #666; min-width: 150rpx; } .card-container .card-value { color: #333; flex: 1; } .card-container .card-footer-section { display: flex; justify-content: space-between; align-items: center; padding-top: 20rpx; border-top: 1rpx solid #f0f2f5; } .card-container .status-container { display: flex; align-items: center; } .card-container .status-container .score { margin-left: 24rpx; font-size: 30rpx; color: #e6a23c; font-weight: 500; } .card-container .action-btn { min-width: 180rpx; } .pagination-container { margin-top: 40rpx; display: flex; justify-content: center; } /* 响应式调整 - 移动端 */ @media (max-width: 768px) { .button-group { flex-direction: column; } .button-group .action-button { margin: 12rpx 0; width: 100%; } .card-container .card-footer-section { flex-direction: column; align-items: flex-start; } .card-container .status-container { margin-bottom: 20rpx; } .card-container .action-btn { width: 100%; } } </style> 封装异步函数 + 生命周期钩子(推荐)
07-18
<template> <div class="wrap"> <div class="login"> <h1 class="tc mb20 fn f20">十方智育-后台管理系统</h1> <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" :rules="rules" label-width="auto" class="demo-ruleForm" status-icon> <el-form-item label="用户名" prop="username"> <el-input v-model="ruleForm.username" placeholder="请输入" prefix-icon="User" /> </el-form-item> <el-form-item label="密码" prop="password"> <el-input show-password v-model="ruleForm.password" placeholder="请输入" prefix-icon="Lock" /> </el-form-item> <!-- 验证码 --> <el-form-item label="验证码" prop="code"> <div class="code"> <el-input v-model="ruleForm.code" placeholder="请输入" prefix-icon="Odometer" /> <img class="ml5" src="/imgs/code.gif" alt=""> </div> </el-form-item> <el-form-item label=" "> <el-checkbox-group v-model="ruleForm.remember"> <el-checkbox value="1" name="type">记住密码</el-checkbox> </el-checkbox-group> </el-form-item> <el-form-item> <el-button size="large" style="width: 100%;" type="primary" @click="submitForm(ruleFormRef)">登 录</el-button> </el-form-item> </el-form> </div> </div> <p class="info tc">Copyright © 2018-2024 ruoyi.vip All Rights Reserved.</p> </template> <script setup> import { reactive, ref } from 'vue' import { ElMessage } from 'element-plus' import { useRouter } from 'vue-router' const router = useRouter(); const ruleFormRef = ref() const ruleForm = reactive({ username: 'admim', password: '123', code: '1', remember:['1'] }) const rules = reactive({ username: [ { required: true, message: '不许为空', trigger: 'blur' } ], password: [ { required: true, message: '不许为空', trigger: 'blur' } ], code: [ { required: true, message: '不许为空', trigger: 'blur' } ] }) const submitForm = async (formEl) => { // if (!formEl) return await formEl.validate((valid, fields) => { params:{ password:ruleForm.password, } }).then(res=>{ let result = res.data; if (result.code==1) { // console.log('submit!') ElMessage({ message: '登录成功!', type: 'success', }) router.replace('/'); } else { console.log('error submit!', fields) ElMessage({ message: '登录失败!', type: 'warning', }) } }) } </script> <style scoped> .wrap { height: 100vh; background-color: pink; background-image: url(@/assets/imgs/login-bg.jpg); background-repeat: no-repeat; background-size: cover; background-position: center center; display: flex; justify-content: center; align-items: center; } .login{width: 400px;padding: 20px;background-color: #fff;border-radius: 10px;} .code{display: flex;height: 36px;} .info{position: fixed;width: 100%;bottom: 10px;left: 0;color: #fff;} </style>
03-08
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

大龄牛码

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值