Yezb
/
ss_dc_wechat_mini_program


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814
							<%@ page language="java" pageEncoding="UTF-8" isELIgnored="false" %>
<%@ taglib uri="/ssTag" prefix="ss"%>
<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">
    <!-- 在 head 标签中修改或添加 meta 标签 -->
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' 'unsafe-eval' 'unsafe-inline' http://127.0.0.1:* http://localhost:* http://192.168.3.174:*; worker-src 'self' blob: http://192.168.3.174:*; script-src 'self' 'unsafe-eval' 'unsafe-inline' blob: http://192.168.3.174:*; img-src 'self' data: blob:; style-src 'self' 'unsafe-inline'; font-src 'self' data:; connect-src 'self' blob: http://192.168.3.174:*; frame-src 'self' blob:;">
    <script src="../ss/js/base.js"></script>
    <script type="module" src="../ss/js/validation-manager.js"></script>
    <script type="module" src="../ss/js/validator-rules.js"></script>
    <style type="text/css">
        .avatar .el-form-item__content {
          position: relative;
        }
  
        .upload {
          width: 124px;
          height: 124px;
          border-radius: 6px;
          cursor: pointer;
          position: absolute;
          top: 0;
          left: 0;
          overflow: hidden;
          text-align: center;
          line-height: 124px;
          font-size: 40px;
          color: #c0c4cc;
          background-color: rgba(0, 0, 0, 0.5);
          opacity: 0;
        }
  
        .upload:hover {
          color: #fff;
          opacity: 1;
        }
  
        /* .icon {
              width: 116px;
              height: 116px;
              border-radius: 3px;
              float: left;
          } */
  
        .icon-border {
          background-color: rgba(243, 246, 248, 0.94);
          border: 4px solid #fff;
          box-shadow: inset 0 1.5px 3px 0 rgba(0, 0, 0, 0.15),
            0 1.5px 3px 0 rgba(0, 0, 0, 0.15);
          box-sizing: content-box;
          margin: auto;
          position: relative;
        }
      </style>
</head>
<body>
    <div id="app">
      <form class="form-container" @submit.prevent>
        <div class="content-box fit-height-content">
          <table class="table-container">
            <tr>
              <th rowspan="4">相片</th>
              <td rowspan="4">
                <div class="photo">
                  <!-- 证件照 -->
                  <ss-photo-upload
                    v-model:url="idPhotoUrl"
                    class="id-photo"
                    :cropper-options="{
                      width: 360,
                      height: 360,
                      aspectRatio: 1
                    }"
                  ></ss-photo-upload>

                  <!-- 生活照 -->
                  <ss-photo-upload
                    v-model:url="lifePhotoUrl"
                    class="life-photo"
                    :cropper-options="{
                      width: 400,
                      height: 300,
                      aspectRatio: 4/3
                    }"
                  ></ss-photo-upload>
                </div>
                <!-- <div class="photo">
                  <div class="left">
                    <div class="content">
                      <input
                        type="file"
                        accept="image/*"
                        id="iconFile"
                        style="display: none"
                      />

                      <div class="icon" onclick="$('#iconFile').click();">
                        <ss-icon name="user" size="140px" />
                      </div>
                      <div class="text">证件照</div>
                    </div>
                  </div>
                  <div class="right">
                    <div class="content">
                      <div class="icon">
                        <ss-icon name="photo" type="common" size="70px" />
                      </div>
                      <div class="text">生活照</div>
                    </div>
                  </div>
                </div> -->
              </td>
              <th>姓名</th>
              <td height="60">
                <ss-input
                  v-model="username"
                  name="username"
                  placeholder="请输入姓名"
                  type="text"
                ></ss-input>
              </td>
            </tr>

            <tr>
              <th>身份证类别</th>
              <td height="60">
                <ss-objp
                  v-model="zhengjianType"
                  name="zhengjianType"
                  :opt="[{label:'请选择',value:''},{ label: '居民身份证', value: '1' },{ label: '香港特区护照或身份证', value: '6' },{ label: '澳门特区护照或身份证', value: '7' },{ label: '台湾居民来往大陆通行证', value: '8' },{ label: '外国人永久居留证', value: '10' }]"
                  placeholder="请选择证件类别"
                  width="300"
                  load="objPickerLoad"
                />
              </td>
              <script>


                zhengjianTypeLoad:{

                  var url='';
                  ajax(url);
                }
              </script>
            </tr>
            <tr>
              <th>证件号</th>
              <td height="60">
                <ss-input
                  v-model="idCardNo"
                  name="idCardNo"
                  placeholder="请输入证件号"
                  type="text"
                ></ss-input>
              </td>
            </tr>
            <tr>
              <th>生日日期</th>
              <td height="60">
                <ss-date-picker
                  v-model="date"
                  name="date"
                  type="date"
                  placeholder="请选择生日日期"
                  width="300px"
                  @change="dateChange"
                ></ss-date-picker>
              </td>
            </tr>
            <tr>
              <th>当前时间</th>
              <td height="60">
                <ss-date-picker
                  v-model="datetime"
                  name="datetime"
                  :type="datetimeType"
                  placeholder="请选择当前时间"
                  width="300px"
                  
                ></ss-date-picker>
              </td>
              <th>时间</th>
              <td height="60">
                <ss-date-picker
                  v-model="time"
                  name="time"
                  type="time"
                  placeholder="请选择时间"
                  width="300px"
                ></ss-date-picker>
              </td>
            </tr>
            <tr>
              <th>英文名</th>
              <td height="60">
                <ss-input
                  v-model="enName"
                  name="enName"
                  placeholder="请输入英文名"
                  type="text"
                ></ss-input>
              </td>
              <th>出生地</th>
              <td height="60">
                <div style="display: flex; width: 100%; height: 100%">
                  <ss-hidden
                    v-model="csdqm"
                    name="csdqm"
                    rule="226699"
                  ></ss-hidden>
                  <ss-cascader
                    v-model="sheng"
                    name="csdqm"
                    placeholder="省"
                    :opt="groups_sheng"
                    width="200px"
                    @change="handleCsdqProvinceChange"
                    :level="1"
                  ></ss-cascader>
                  <ss-cascader
                    v-model="shi"
                    name="csdqm"
                    placeholder="市"
                    :opt="groups_shi"
                    width="200px"
                    @change="handleCsdqCityChange"
                    :level="2"
                  ></ss-cascader>
                  <ss-cascader
                    v-model="qu"
                    name="csdqm"
                    placeholder="区"
                    :opt="groups_qu"
                    width="200px"
                    :level="3"
                  ></ss-cascader>
                </div>
              </td>
            </tr>
            <tr>
              <th>户籍所在地</th>
              <td height="60">
                <div style="display: flex; width: 100%; height: 100%">
                 
                  <ss-hidden
                    v-model="hjzsdm"
                    name="hjzsdm"
                    rule="226699"
                  ></ss-hidden>

                <ss-cascader
                  v-model="hjzsdmSheng"
                  name="hjzsdm"
                  placeholder="省"
                  :opt="groups_hjzsdmSheng"
                  width="200px"
                  @change="handleHjzsdmProvinceChange"
                  :level="1"
                ></ss-cascader>
                <ss-cascader
                  v-model="hjzsdmShi"
                  name="hjzsdm"
                  placeholder="市"
                  :opt="groups_hjzsdmShi"
                  width="200px"
                  @change="handleHjzsdmCityChange"
                  :level="2"
                ></ss-cascader>
                <ss-cascader
                  v-model="hjzsdmQu"
                  name="hjzsdm"
                  placeholder="区"
                  :opt="groups_hjzsdmQu"
                  width="200px"
                  :level="3"
                ></ss-cascader>
              
                </div>
              </td>
              
            </tr>
            <tr>
              <th>专业</th>
              <td>
                <ss-cascader
                  v-model="zyid"
                  name="zyid"
                  placeholder="请选择专业"
                  :opt="groups_zyid"
                  width="250px"
                  @change="zyidChange"
                  :level="1"
                  mode="2"
                ></ss-cascader>
              </td>
              <th>班级</th>
              <td>
                <ss-cascader
                  v-model="bjid"
                  name="bjid"
                  placeholder="请选择班级"
                  :opt="groups_bjid"
                  width="250px"
                  :level="2"
                  mode="2"
                ></ss-cascader>
              </td>
            </tr>
            <tr>
              <th>班级2</th>
              <td>
                <ss-cascader
                  v-model="bjid2"
                  name="bjid2"
                  placeholder="请选择班级2"
                  :opt="groups_bjid2"
                  width="250px"
                  :level="2"
                  mode="2"
                ></ss-cascader>
              </td>
              
            </tr>
            <tr>
              <th>婚姻状况</th>
              <td height="60">
             
                <!-- <ss-onoffbutton-array
                  v-model="hyzk"
                  name="hyzk"
                  :opt="[{ label: '已婚', value: '1', width: '100px' },{ label: '未婚', value: '2', width: '100px' },]"
                  multiple
                /> -->
                <!-- 多选模式 -->
                <ss-onoffbutton
                  v-model="hyzk"
                  name="hyzk"
                  label="已婚"
                  value="1"
                  
                ></ss-onoffbutton>
                <ss-onoffbutton
                  v-model="hyzk"
                  name="hyzk"
                  label="未婚"
                  value="2"
                  
                ></ss-onoffbutton>
             
                <ss-onoffbutton
                  v-model="hyzk"
                  name="hyzk"
                  label="离异"
                  value="3"
                  
                ></ss-onoffbutton>
              </td>
              <th>民族(可输入筛选)</th>
              <td height="60">
                <ss-objp
                  v-model="mingzu"
                  name="mingzu"
                  :opt="groups"
                  placeholder="民族"
                  width="150"
                  :input="true"
                />
              </td>
            </tr>
            <tr>
              <th>邮箱</th>
              <td height="60">
                <ss-input
                  v-model="email"
                  name="email"
                  placeholder="请输入邮箱"
                  type="text"
                ></ss-input>
              </td>
              <th>自定义校验</th>
              <td height="60">
                <ss-input
                  v-model="fieldName"
                  name="fieldName"
                  placeholder="请输入自定义校验"
                  type="text"
                ></ss-input>
              </td>
            </tr>
            <tr>
              <th>
                <div style="height: 150px">备注</div>
              </th>
              <td colspan="3" height="150px">
                <div class="input">
                  <ss-textarea name="remark" v-model="remark" />
                </div>
              </td>
            </tr>
            <tr>
              <th>
                <div style="height: 150px">jodit</div>
              </th>
              <td colspan="3" height="150px">
                <ss-editor
                  v-model="content"
                  name="content"
                  :url="contentUrl"
                  :height="500"
                  upload-url="/your-upload-url"
                  :readonly="false"
                  placeholder="请输入内容"
                  @ready="onEditorReady"
                  @change="onChange"
                ></ss-editor>

              </td>
            </tr>
            
          </table>
        </div>
        <div>
          <ss-validate err-msg="后台返回的错误" text-align="left" />
        </div>
        <div class="bottom-div">
          <ss-bottom-button
            text="取消"
            @click="onDialogClose"
            icon-class="bottom-div-close"
          ></ss-bottom-button>
          <ss-bottom-button
            text="保存"
            @click="onSubmit"
            icon-class="bottom-div-save"
          ></ss-bottom-button>
        </div>
      </form>
    </div>
    <script type="module">
        const doCascade = async function({
            children = [],
            url,
            vm,
            prefix = 'groups_',
            loadData = () => {},
            value,           
            mode = 1
        }) {
        try {
            // 清空所有子级的值和选项
            children.forEach(child => {
            vm[child] = '';
            // 使用字符串拼接替代模板字符串
            vm[prefix + child] = [];
            });
            console.log(vm,prefix,children);
            
            if (loadData && value) {
                const data = await loadData(value);
                if (mode == '2') {
                    children.forEach(child => {
                    // 使用字符串拼接替代模板字符串
                    vm[prefix + child] = data;
                    });
                } else {
                    if (children.length > 0) {
                    // 使用字符串拼接替代模板字符串
                    vm[prefix + children[0]] = data;
                    }
                }
                return;
            }

            if (url) {
                const response = await fetch(url);
                const data = await response.json();
                    if (children.length > 0) {
                        // 使用字符串拼接替代模板字符串
                        vm[prefix + children[0]] = data;
                    }
                }
            } catch (error) {
                console.error('级联数据加载失败:', error);
                if (children.length > 0) {
                // 使用字符串拼接替代模板字符串
                vm[prefix + children[0]] = [];
                }
            }
        };
      // 模拟 Ajax 请求的工具函数
      const mockAjax = {
        // 缓存数据，避免重复请求
        _cache: null,

        // 获取完整数据
        async getData() {
          if (this._cache) return this._cache;
          const response = await fetch("../ss/js/level.json");
          this._cache = await response.json();
          return this._cache;
        },

        // 获取所有省份
        async getProvinces() {
          const data = await this.getData();
          return data.map((item) => ({
            label: item.name,
            value: item.code,
          }));
        },

        // 根据省份代码获取城市
        async getCities(provinceCode) {
          const data = await this.getData();
          const province = data.find((p) => p.code === provinceCode);
          if (!province || !province.children) return [];
            
            const cities = province.children
            .filter((item) => item.city) // 确保是市级数据
            .map((item) => ({
              label: item.name,
              value: item.code,
            }));
            
          return cities
        },

        // 根据城市代码获取区县
        async getDistricts(cityCode) {
          const data = await this.getData();
          for (const province of data) {
            if (!province.children) continue;
            const city = province.children.find((c) => c.code === cityCode);
            if (city && city.children) {
              return city.children.map((item) => ({
                label: item.name,
                value: item.code,
              }));
            }
          }
          return [];
        },
         // 模拟专业数据
        getMajors() {
          return new Promise((resolve) => {
            setTimeout(() => {
              resolve([
                { label: '计算机科学与技术', value: '08010000' },  // 补齐8位
                { label: '软件工程', value: '08020000' },
                { label: '网络工程', value: '08030000' }
              ]);
            }, 1000);
          });
        },
        // 模拟班级数据
        getClasses(majorCode) {
          // majorCode 会是 '08010000' 这样的格式
          
          const classData = {
            '08010000': [
              { label: '计科1班', value: '08010001' },
              { label: '计科2班', value: '08010002' }
            ],
            '08020000': [
              { label: '软件1班', value: '08020001' },
              { label: '软件2班', value: '08020002' }
            ],
            '08030000': [
              { label: '网络1班', value: '08030001' },
              { label: '网络2班', value: '08030002' }
            ]
          };

          return new Promise((resolve) => {
            setTimeout(() => {
              resolve(classData[majorCode] || []);
            }, 1000);
          });
        }
      };
      SS.ready(function () {
        ssVm.add("ss.commonValidator.notNull", ["username"], {
          msgPrfx: "姓名",
        });
        ssVm.add("ss.commonValidator.notNull", ["enName"], {
          msgPrfx: "英文名",
        });
        ssVm.add("ss.commonValidator.notNull", ["csdqm"], {
          msgPrfx: "出生地",
        });
        ssVm.add("ss.commonValidator.notNull", ["hjzsdm"], {
          msgPrfx: "户籍所在地",
        });
        ssVm.add("ss.commonValidator.idCard", ["idCardNo"], {
          msgPrfx: "证件号",
          relField: "zhengjianType",
        });
        ssVm.add("ss.commonValidator.notNull", ["date"], {
          msgPrfx: "生日日期",
        });
        ssVm.add("ss.commonValidator.notNull", ["content"], {
          msgPrfx: "内容",
        });
        ssVm.add("ss.commonValidator.notNull", ["zhengjianType"], {
          msgPrfx: "证件类别",
        });
        ssVm.add("ss.commonValidator.notNull", ["csd"], { msgPrfx: "出生地" });
        ssVm.add("ss.commonValidator.notNull", ["mingzu"], { msgPrfx: "民族" });
        ssVm.add("ss.commonValidator.notNull", ["hyzk"], {
          msgPrfx: "婚姻状况",
        });
        ssVm.add("ss.commonValidator.notNull", ["remark"], { msgPrfx: "备注" });
        // 邮箱格式验证
        ssVm.add("ss.commonValidator.email", ["email"], {
          msgPrfx: "邮箱",
          required: true,
        });

        ssVm.add("ss.commonValidator.custom", ["fieldName"], {
          msgPrfx: "字段名",
          validate: (value) => {
            // 返回 true/false 或者带消息的对象
            if (value.includes("test")) {
              return {
                valid: false,
                message: "不能输入test",
              };
            }
            return true;
          },
        });
        // 继承父页面的eventBus
        const eventBus = window.parent.sharedEventBus;
        function sonClose() {
          // console.log("孙组件关闭了");
        }

        // 调用组件中的初始化方法
        window.SS.dom.initializeFormApp({
          el: "#app",
          data() {
            return {
              date: "",
              datetime: "",
              time:"",
              username: "",
              enName: "",
              idCardNo: "",
              zhengjianType: "",
              csd: "",
              
              mingzu: "",
              zhengzhimianmao: "",
              hyzk: "",
              email: "",
              fieldName: "",
              remark: "",
              visible: true,
              idPhotoUrl: "",
              lifePhotoUrl: "",
              // lifePhotoUrl: "https://m.gzgs.edu.cn/skin/easy/image/default-personalPhoto.png",
              groups: [
                {
                  value: "1",
                  label: "汉族",
                },
                {
                  value: "02",
                  label: "蒙古族",
                },
              ],
              reslutVisible: false,

              csdqm: "",
              sheng: "",
              shi: "",
              qu: "",
              groups_sheng: [],
              groups_shi: [],
              groups_qu: [],
              hjzsdm: "440105",
              hjzsdmSheng: "",
              hjzsdmShi: "",
              hjzsdmQu: "",
              groups_hjzsdmSheng: [],
              groups_hjzsdmShi: [],
              groups_hjzsdmQu: [],

              zyid: '08010000',
              bjid: '08010001',
              bjid2: '',
              groups_zyid: [],
              groups_bjid: [],
              groups_bjid2: []  ,
              
              content: '<p>初始内容</p>'
              
            };
          },
          setup() {},
          methods: {
            showDialog() {
              this.visible = !this.visible;
            },
            onDialogClose() {
              SS.closeDialog();
              // eventBus.publish('inputDialog', false);
            },
            dateChange(value){
              console.log(value);
            },
            onSubmit() {
              console.trace("onSubmit called"); // 这会显示调用栈

            },
            // 加载省份数据
            async loadProvinces() {
              const provinces = await mockAjax.getProvinces();
              this.groups_sheng = provinces;
              this.groups_hjzsdmSheng = provinces;
            },
            // 加载专业数据
            async loadMajors() {
              this.groups_zyid = await mockAjax.getMajors();;
            },
            // 出生地区的处理方法
            async handleCsdqProvinceChange(value) {
              await doCascade({
                children: ['shi', 'qu'],
                value,
                vm: this,
                loadData: (value) => mockAjax.getCities(value),  // 使用箭头函数
              });
            },

            async handleCsdqCityChange(value) {
              await doCascade({
                children: ['qu'],
                value,
                vm: this,
                loadData: (value) => mockAjax.getDistricts(value),  // 使用箭头函数
              });
            },

            // 户籍住所的处理方法
            async handleHjzsdmProvinceChange(value) {
                console.log("处罚了",value);
              await doCascade({
                children: ['hjzsdmShi', 'hjzsdmQu'],
                value,
                vm: this,
                loadData: (value) => mockAjax.getCities(value),
              });
              console.log(this.groups_hjzsdmShi);
            },

            async handleHjzsdmCityChange(value) {
              await doCascade({
                children: ['hjzsdmQu'],
                value,
                vm: this,
                loadData: (value) => mockAjax.getDistricts(value),
  
              });
            },
            async zyidChange(value) {
              // this.bjid = '';
              // this.bjid2 = '';
              // this.groups_bjid = [];
              // this.groups_bjid2 = [];
              // this.groups_bjid = await mockAjax.getClasses(value);
              // this.groups_bjid2 = await mockAjax.getClasses(value);
              await doCascade({
                children: ['bjid', 'bjid2'],
                value,
                vm: this,
                loadData: (value) => mockAjax.getClasses(value),
                mode:2
              });
            },
            onEditorReady(editor) {
              // console.log('编辑器初始化完成', editor);
            },
            onChange(content) {
              console.log('内容变化:', content);
            },
          },
          mounted() {
            // 先加载初始数据
            this.loadProvinces();  // 确保第一时间加载省份数据
            this.loadMajors();
          },

          isDialogPage: true,
        });
        // window.SS.cropper.init({
        //   el: $("#iconFile"),
        //   photoSize: {
        //     // 裁剪的图片大小，注意需要和 aspectRatio 保持统一比例
        //     width: 360,
        //     height: 360,
        //   },
        //   success: function (path) {
        //     // 成功后的回调方法，path为裁剪后的img路径
        //     console.log(path)
        //   },
        // });
      });
    </script>
  </body>
</html>