inl-ui 0.0.37 → 0.0.39

package/src/pageComponent/views/thingModel/component/tabAttr/update.tsx

@@ -1,408 +1,408 @@
-import { defineComponent, computed, reactive, ref, watch, nextTick } from "vue";
-import { message } from "ant-design-vue";
-import * as modelApis from "@/api/thingModel";
-import "../../less/thingModel.less";
-import { formAttrUpdateRules } from "../../config";
-const formDefault = {
-  remark: "",
-  propertyType: "property",
-  useStandard: true,
-  queryDisplay: false,
-  listDisplay: false,
-  readonly: false,
-  required: false,
-  display: true,
-  padDiplay: true,
-  mobileDisplay: true,
-  colspan: 1,
-  displayType: "text",
-  columnType: "",
-};
-export default defineComponent({
-  setup(props, { expose, emit }) {
-    const formRef = ref();
-    const state = reactive<{
-      formModel: any;
-      formRules: any;
-      title: string;
-      visible: boolean;
-      isAdd: boolean;
-      alarmShow: boolean;
-      keyword: string;
-      alarmList: any[];
-      tableList: any[];
-      dataBankList: any[];
-    }>({
-      formModel: {},
-      formRules: {},
-      title: "",
-      visible: false,
-      isAdd: false,
-      alarmShow: false,
-      keyword: "",
-      alarmList: [],
-      tableList: [],
-      dataBankList: [],
-    });
-
-    const update = () => {
-      formRef.value.validate().then(() => {
-        modelApis.updateAttr(state.formModel).then(() => {
-          message.success("更新成功");
-          emit("ok");
-          close();
-        });
-      });
-    };
-
-    const open = (
-      isAdd,
-      useStandard,
-      thingCode,
-      data = formDefault,
-      tableList
-    ) => {
-      state.title = isAdd ? "新增" : "编辑";
-      state.isAdd = isAdd;
-      state.tableList = tableList;
-      state.formModel = { ...state.formModel, ...data, useStandard, thingCode };
-      state.formRules = formAttrUpdateRules(thingCode, data.id || "");
-      getDataBankList(thingCode, data?.code);
-      state.visible = true;
-      if (isAdd) {
-        getAlarm();
-      }
-      if (useStandard) {
-        state.alarmShow = true;
-      }
-    };
-    const close = () => {
-      state.visible = false;
-      state.formModel = {};
-      state.alarmShow = false;
-      state.keyword = "";
-      if (formRef.value) {
-        formRef.value.clearValidate();
-      }
-    };
-    const getAlarm = () => {
-      const data = {
-        pageNum: 1,
-        pageSize: 999,
-        keyword: state.keyword,
-      };
-      modelApis.alarmList(data).then((res) => {
-        state.alarmList = res.data.list;
-      });
-    };
-    const getDataBankList = (thingCode: string, propertycode?: string) => {
-      modelApis.getDataBankList(thingCode, propertycode).then((res) => {
-        state.dataBankList = res.data;
-      });
-    };
-    const handleConfig = (row: any) => {
-      state.formModel.code = row.code;
-      state.formModel.name = row.name;
-      state.alarmShow = false;
-    };
-    const dataTypeChange = (val) => {
-      if (val) {
-        const one = state.dataBankList.find((el) => el.COLUMN_NAME === val);
-        state.formModel.columnType = one.DATA_TYPE;
-      } else {
-        state.formModel.columnType = "";
-      }
-    };
-    const footerContext = () => {
-      return (
-        <a-space>
-          <a-button type="primary" ghost onClick={close}>
-            取消
-          </a-button>
-          {state.isAdd && state.formModel.useStandard && !state.alarmShow && (
-            <a-button
-              type="primary"
-              ghost
-              onClick={() => {
-                state.alarmShow = true;
-              }}
-            >
-              重新选择
-            </a-button>
-          )}
-          {!state.alarmShow && (
-            <a-button type="primary" onClick={update}>
-              确定
-            </a-button>
-          )}
-        </a-space>
-      );
-    };
-    watch(
-      () => state.formModel.propertyType,
-      (n, o) => {
-        if (n !== "property") {
-          state.formModel.listDisplay = false;
-          state.formModel.queryDisplay = false;
-          state.formModel.readonly = false;
-          state.formModel.required = false;
-          state.formModel.columnName = undefined;
-          if (state.isAdd) {
-            state.formModel.columnType = "string";
-          }
-        } else {
-          if (state.isAdd) {
-            state.formModel.columnType = "";
-          }
-        }
-
-        formRef.value && formRef.value.clearValidate();
-      }
-    );
-
-    expose({ open });
-    return () => (
-      <div class="">
-        <a-modal
-          visible={state.visible}
-          title={state.title}
-          width="550px"
-          top="10vh"
-          onCancel={close}
-          onOk={update}
-          footer={footerContext()}
-        >
-          <div class="update_attr_con">
-            {state.alarmShow ? (
-              <div class="alarm_list">
-                <a-input-search
-                  v-model={[state.keyword, "value"]}
-                  placeholder="请输入搜素内容"
-                  allowClear
-                  onSearch={getAlarm}
-                />
-                <div class="mar-t-20">
-                  {state.alarmList.map((item) => {
-                    return (
-                      <div class="alarm_card" key={item.code}>
-                        <div class="flex-lr-c">
-                          <div>
-                            <p>{item.name}</p>
-                            <p>{item.code}</p>
-                          </div>
-                          <a onClick={() => handleConfig(item)}>
-                            选择并继续配置
-                          </a>
-                        </div>
-                      </div>
-                    );
-                  })}
-                </div>
-              </div>
-            ) : (
-              <a-form
-                ref={formRef}
-                model={state.formModel}
-                rules={state.formRules}
-                label-col={{ span: 8 }}
-                wrapper-col={{ span: 15 }}
-              >
-                <a-form-item label="属性类型" name="propertyType">
-                  <a-radio-group
-                    disabled={!state.isAdd}
-                    v-model={[state.formModel.propertyType, "value"]}
-                  >
-                    <a-radio value="property">静态属性</a-radio>
-                    <a-radio value="metric">动态属性</a-radio>
-                    <a-radio value="logic">逻辑属性</a-radio>
-                    {/* <a-radio value="alarm">报警属性</a-radio>
-                    <a-radio value="action">动作属性</a-radio> */}
-                  </a-radio-group>
-                </a-form-item>
-                <a-form-item label="属性编码" name="code">
-                  <a-input
-                    v-model={[state.formModel.code, "value"]}
-                    disabled={
-                      state.formModel.useStandard ||
-                      (!state.isAdd &&
-                        state.formModel.propertyType === "property")
-                    }
-                  />
-                </a-form-item>
-                <a-form-item label="属性名称" name="name">
-                  <a-input
-                    v-model={[state.formModel.name, "value"]}
-                    disabled={state.formModel.useStandard}
-                  />
-                </a-form-item>
-                {state.formModel.propertyType === "property" && (
-                  <a-form-item label="数据库字段名" name="columnName">
-                    <a-select
-                      v-model={[state.formModel.columnName, "value"]}
-                      onChange={dataTypeChange}
-                      disabled={
-                        !state.isAdd &&
-                        state.formModel.propertyType === "property"
-                      }
-                    >
-                      {state.dataBankList.map((el) => {
-                        return (
-                          <a-select-option
-                            value={el.COLUMN_NAME}
-                            key={el.COLUMN_NAME}
-                          >
-                            {el.COLUMN_NAME}
-                          </a-select-option>
-                        );
-                      })}
-                    </a-select>
-                  </a-form-item>
-                )}
-                <a-form-item label="字段类型" name="columnType">
-                  <a-select
-                    v-model={[state.formModel.columnType, "value"]}
-                    disabled={state.formModel.propertyType === "property"}
-                  >
-                    <a-select-option value="string">
-                      string(字符串)
-                    </a-select-option>
-                    <a-select-option value="boolean">
-                      boolean(布尔型)
-                    </a-select-option>
-                    <a-select-option value="long">long(整数)</a-select-option>
-                    <a-select-option value="double">
-                      double(小数)
-                    </a-select-option>
-                  </a-select>
-                </a-form-item>
-                {state.formModel.propertyType === "logic" && (
-                  <a-form-item label="默认计算公式" name="defaultRule">
-                    <a-input v-model={[state.formModel.defaultRule, "value"]} />
-                  </a-form-item>
-                )}
-                <a-form-item label="单位" name="unit">
-                  <a-input v-model={[state.formModel.unit, "value"]} />
-                </a-form-item>
-                <a-form-item label="是否显示" name="">
-                  <a-checkbox v-model={[state.formModel.display, "checked"]}>
-                    Web端
-                  </a-checkbox>
-                  <a-checkbox v-model={[state.formModel.padDiplay, "checked"]}>
-                    Pad端
-                  </a-checkbox>
-                  <a-checkbox
-                    v-model={[state.formModel.mobileDisplay, "checked"]}
-                  >
-                    手机端
-                  </a-checkbox>
-                </a-form-item>
-                <a-form-item label="前端界面显示名" name="displayLabel">
-                  <a-input v-model={[state.formModel.displayLabel, "value"]} />
-                </a-form-item>
-                <a-form-item label="显示样式" name="displayType">
-                  <a-select v-model={[state.formModel.displayType, "value"]}>
-                    <a-select-option value="text">文本text</a-select-option>
-                    <a-select-option value="textarea">
-                      文本域textarea
-                    </a-select-option>
-                    <a-select-option value="number">数字number</a-select-option>
-                    <a-select-option value="date">日期date</a-select-option>
-                    <a-select-option value="datetime">
-                      日期时间datetime
-                    </a-select-option>
-                    <a-select-option value="select">
-                      下拉框select
-                    </a-select-option>
-                    <a-select-option value="signal">
-                      枚举信号点signal
-                    </a-select-option>
-                    <a-select-option value="switch">开关switch</a-select-option>
-                  </a-select>
-                </a-form-item>
-                {state.formModel.propertyType === "property" && (
-                  <a-form-item label="默认值" name="defaultValue">
-                    <a-input
-                      v-model={[state.formModel.defaultValue, "value"]}
-                    />
-                  </a-form-item>
-                )}
-                {(state.formModel.propertyType === "metric" ||
-                  state.formModel.propertyType === "logic") && (
-                  <a-form-item label="小数位数" name="decimalPlace">
-                    <a-input-number
-                      style="width:100%"
-                      min={0}
-                      v-model={[state.formModel.decimalPlace, "value"]}
-                    />
-                  </a-form-item>
-                )}
-                {state.formModel.propertyType === "property" && (
-                  <a-form-item label="校验用正则表达式" name="regex">
-                    <a-input v-model={[state.formModel.regex, "value"]} />
-                  </a-form-item>
-                )}
-                <a-form-item label="跨列展示" name="colspan">
-                  <a-input-number
-                    v-model={[state.formModel.colspan, "value"]}
-                    addon-after="列"
-                    style="width:100%"
-                  />
-                </a-form-item>
-                {state.formModel.propertyType === "property" && (
-                  <div>
-                    <a-form-item label="是否只读" name="readonly">
-                      <a-radio-group
-                        v-model={[state.formModel.readonly, "value"]}
-                      >
-                        <a-radio value={true}>只读</a-radio>
-                        <a-radio value={false}>可编辑</a-radio>
-                      </a-radio-group>
-                    </a-form-item>
-                    <a-form-item label="是否必填" name="required">
-                      <a-radio-group
-                        v-model={[state.formModel.required, "value"]}
-                      >
-                        <a-radio value={true}>必填</a-radio>
-                        <a-radio value={false}>非必填</a-radio>
-                      </a-radio-group>
-                    </a-form-item>
-                    <a-form-item label="属性在PC端是否可查询" name="">
-                      <a-switch
-                        v-model={[state.formModel.queryDisplay, "checked"]}
-                      ></a-switch>
-                    </a-form-item>
-                    <a-form-item label="属性是否在列表显示" name="listDisplay">
-                      <a-switch
-                        v-model={[state.formModel.listDisplay, "checked"]}
-                      ></a-switch>
-                    </a-form-item>
-                  </div>
-                )}
-                <a-form-item label="显示排序" name="sort">
-                  <a-input-number
-                    min={0}
-                    v-model={[state.formModel.sort, "value"]}
-                    style="width:100%"
-                  />
-                </a-form-item>
-                <a-form-item label="属性是否为超级链接" name="canLink">
-                  <a-space>
-                    <a-switch
-                      v-model={[state.formModel.canLink, "checked"]}
-                    ></a-switch>
-                    {state.formModel.canLink && (
-                      <a-input v-model={[state.formModel.linkUrl, "value"]} />
-                    )}
-                  </a-space>
-                </a-form-item>
-                <a-form-item label="备注" name="remark">
-                  <a-textarea v-model={[state.formModel.remark, "value"]} />
-                </a-form-item>
-              </a-form>
-            )}
-          </div>
-        </a-modal>
-      </div>
-    );
-  },
-});
+import { defineComponent, computed, reactive, ref, watch, nextTick } from "vue";
+import { message } from "ant-design-vue";
+import * as modelApis from "@/api/thingModel";
+import "../../less/thingModel.less";
+import { formAttrUpdateRules } from "../../config";
+const formDefault = {
+  remark: "",
+  propertyType: "property",
+  useStandard: true,
+  queryDisplay: false,
+  listDisplay: false,
+  readonly: false,
+  required: false,
+  display: true,
+  padDiplay: true,
+  mobileDisplay: true,
+  colspan: 1,
+  displayType: "text",
+  columnType: "",
+};
+export default defineComponent({
+  setup(props, { expose, emit }) {
+    const formRef = ref();
+    const state = reactive<{
+      formModel: any;
+      formRules: any;
+      title: string;
+      visible: boolean;
+      isAdd: boolean;
+      alarmShow: boolean;
+      keyword: string;
+      alarmList: any[];
+      tableList: any[];
+      dataBankList: any[];
+    }>({
+      formModel: {},
+      formRules: {},
+      title: "",
+      visible: false,
+      isAdd: false,
+      alarmShow: false,
+      keyword: "",
+      alarmList: [],
+      tableList: [],
+      dataBankList: [],
+    });
+
+    const update = () => {
+      formRef.value.validate().then(() => {
+        modelApis.updateAttr(state.formModel).then(() => {
+          message.success("更新成功");
+          emit("ok");
+          close();
+        });
+      });
+    };
+
+    const open = (
+      isAdd,
+      useStandard,
+      thingCode,
+      data = formDefault,
+      tableList
+    ) => {
+      state.title = isAdd ? "新增" : "编辑";
+      state.isAdd = isAdd;
+      state.tableList = tableList;
+      state.formModel = { ...state.formModel, ...data, useStandard, thingCode };
+      state.formRules = formAttrUpdateRules(thingCode, data.id || "");
+      getDataBankList(thingCode, data?.code);
+      state.visible = true;
+      if (isAdd) {
+        getAlarm();
+      }
+      if (useStandard) {
+        state.alarmShow = true;
+      }
+    };
+    const close = () => {
+      state.visible = false;
+      state.formModel = {};
+      state.alarmShow = false;
+      state.keyword = "";
+      if (formRef.value) {
+        formRef.value.clearValidate();
+      }
+    };
+    const getAlarm = () => {
+      const data = {
+        pageNum: 1,
+        pageSize: 999,
+        keyword: state.keyword,
+      };
+      modelApis.alarmList(data).then((res) => {
+        state.alarmList = res.data.list;
+      });
+    };
+    const getDataBankList = (thingCode: string, propertycode?: string) => {
+      modelApis.getDataBankList(thingCode, propertycode).then((res) => {
+        state.dataBankList = res.data;
+      });
+    };
+    const handleConfig = (row: any) => {
+      state.formModel.code = row.code;
+      state.formModel.name = row.name;
+      state.alarmShow = false;
+    };
+    const dataTypeChange = (val) => {
+      if (val) {
+        const one = state.dataBankList.find((el) => el.COLUMN_NAME === val);
+        state.formModel.columnType = one.DATA_TYPE;
+      } else {
+        state.formModel.columnType = "";
+      }
+    };
+    const footerContext = () => {
+      return (
+        <a-space>
+          <a-button type="primary" ghost onClick={close}>
+            取消
+          </a-button>
+          {state.isAdd && state.formModel.useStandard && !state.alarmShow && (
+            <a-button
+              type="primary"
+              ghost
+              onClick={() => {
+                state.alarmShow = true;
+              }}
+            >
+              重新选择
+            </a-button>
+          )}
+          {!state.alarmShow && (
+            <a-button type="primary" onClick={update}>
+              确定
+            </a-button>
+          )}
+        </a-space>
+      );
+    };
+    watch(
+      () => state.formModel.propertyType,
+      (n, o) => {
+        if (n !== "property") {
+          state.formModel.listDisplay = false;
+          state.formModel.queryDisplay = false;
+          state.formModel.readonly = false;
+          state.formModel.required = false;
+          state.formModel.columnName = undefined;
+          if (state.isAdd) {
+            state.formModel.columnType = "string";
+          }
+        } else {
+          if (state.isAdd) {
+            state.formModel.columnType = "";
+          }
+        }
+
+        formRef.value && formRef.value.clearValidate();
+      }
+    );
+
+    expose({ open });
+    return () => (
+      <div class="">
+        <a-modal
+          visible={state.visible}
+          title={state.title}
+          width="550px"
+          top="10vh"
+          onCancel={close}
+          onOk={update}
+          footer={footerContext()}
+        >
+          <div class="update_attr_con">
+            {state.alarmShow ? (
+              <div class="alarm_list">
+                <a-input-search
+                  v-model={[state.keyword, "value"]}
+                  placeholder="请输入搜素内容"
+                  allowClear
+                  onSearch={getAlarm}
+                />
+                <div class="mar-t-20">
+                  {state.alarmList.map((item) => {
+                    return (
+                      <div class="alarm_card" key={item.code}>
+                        <div class="flex-lr-c">
+                          <div>
+                            <p>{item.name}</p>
+                            <p>{item.code}</p>
+                          </div>
+                          <a onClick={() => handleConfig(item)}>
+                            选择并继续配置
+                          </a>
+                        </div>
+                      </div>
+                    );
+                  })}
+                </div>
+              </div>
+            ) : (
+              <a-form
+                ref={formRef}
+                model={state.formModel}
+                rules={state.formRules}
+                label-col={{ span: 8 }}
+                wrapper-col={{ span: 15 }}
+              >
+                <a-form-item label="属性类型" name="propertyType">
+                  <a-radio-group
+                    disabled={!state.isAdd}
+                    v-model={[state.formModel.propertyType, "value"]}
+                  >
+                    <a-radio value="property">静态属性</a-radio>
+                    <a-radio value="metric">动态属性</a-radio>
+                    <a-radio value="logic">逻辑属性</a-radio>
+                    {/* <a-radio value="alarm">报警属性</a-radio>
+                    <a-radio value="action">动作属性</a-radio> */}
+                  </a-radio-group>
+                </a-form-item>
+                <a-form-item label="属性编码" name="code">
+                  <a-input
+                    v-model={[state.formModel.code, "value"]}
+                    disabled={
+                      state.formModel.useStandard ||
+                      (!state.isAdd &&
+                        state.formModel.propertyType === "property")
+                    }
+                  />
+                </a-form-item>
+                <a-form-item label="属性名称" name="name">
+                  <a-input
+                    v-model={[state.formModel.name, "value"]}
+                    disabled={state.formModel.useStandard}
+                  />
+                </a-form-item>
+                {state.formModel.propertyType === "property" && (
+                  <a-form-item label="数据库字段名" name="columnName">
+                    <a-select
+                      v-model={[state.formModel.columnName, "value"]}
+                      onChange={dataTypeChange}
+                      disabled={
+                        !state.isAdd &&
+                        state.formModel.propertyType === "property"
+                      }
+                    >
+                      {state.dataBankList.map((el) => {
+                        return (
+                          <a-select-option
+                            value={el.COLUMN_NAME}
+                            key={el.COLUMN_NAME}
+                          >
+                            {el.COLUMN_NAME}
+                          </a-select-option>
+                        );
+                      })}
+                    </a-select>
+                  </a-form-item>
+                )}
+                <a-form-item label="字段类型" name="columnType">
+                  <a-select
+                    v-model={[state.formModel.columnType, "value"]}
+                    disabled={state.formModel.propertyType === "property"}
+                  >
+                    <a-select-option value="string">
+                      string(字符串)
+                    </a-select-option>
+                    <a-select-option value="boolean">
+                      boolean(布尔型)
+                    </a-select-option>
+                    <a-select-option value="long">long(整数)</a-select-option>
+                    <a-select-option value="double">
+                      double(小数)
+                    </a-select-option>
+                  </a-select>
+                </a-form-item>
+                {state.formModel.propertyType === "logic" && (
+                  <a-form-item label="默认计算公式" name="defaultRule">
+                    <a-input v-model={[state.formModel.defaultRule, "value"]} />
+                  </a-form-item>
+                )}
+                <a-form-item label="单位" name="unit">
+                  <a-input v-model={[state.formModel.unit, "value"]} />
+                </a-form-item>
+                <a-form-item label="是否显示" name="">
+                  <a-checkbox v-model={[state.formModel.display, "checked"]}>
+                    Web端
+                  </a-checkbox>
+                  <a-checkbox v-model={[state.formModel.padDiplay, "checked"]}>
+                    Pad端
+                  </a-checkbox>
+                  <a-checkbox
+                    v-model={[state.formModel.mobileDisplay, "checked"]}
+                  >
+                    手机端
+                  </a-checkbox>
+                </a-form-item>
+                <a-form-item label="前端界面显示名" name="displayLabel">
+                  <a-input v-model={[state.formModel.displayLabel, "value"]} />
+                </a-form-item>
+                <a-form-item label="显示样式" name="displayType">
+                  <a-select v-model={[state.formModel.displayType, "value"]}>
+                    <a-select-option value="text">文本text</a-select-option>
+                    <a-select-option value="textarea">
+                      文本域textarea
+                    </a-select-option>
+                    <a-select-option value="number">数字number</a-select-option>
+                    <a-select-option value="date">日期date</a-select-option>
+                    <a-select-option value="datetime">
+                      日期时间datetime
+                    </a-select-option>
+                    <a-select-option value="select">
+                      下拉框select
+                    </a-select-option>
+                    <a-select-option value="signal">
+                      枚举信号点signal
+                    </a-select-option>
+                    <a-select-option value="switch">开关switch</a-select-option>
+                  </a-select>
+                </a-form-item>
+                {state.formModel.propertyType === "property" && (
+                  <a-form-item label="默认值" name="defaultValue">
+                    <a-input
+                      v-model={[state.formModel.defaultValue, "value"]}
+                    />
+                  </a-form-item>
+                )}
+                {(state.formModel.propertyType === "metric" ||
+                  state.formModel.propertyType === "logic") && (
+                  <a-form-item label="小数位数" name="decimalPlace">
+                    <a-input-number
+                      style="width:100%"
+                      min={0}
+                      v-model={[state.formModel.decimalPlace, "value"]}
+                    />
+                  </a-form-item>
+                )}
+                {state.formModel.propertyType === "property" && (
+                  <a-form-item label="校验用正则表达式" name="regex">
+                    <a-input v-model={[state.formModel.regex, "value"]} />
+                  </a-form-item>
+                )}
+                <a-form-item label="跨列展示" name="colspan">
+                  <a-input-number
+                    v-model={[state.formModel.colspan, "value"]}
+                    addon-after="列"
+                    style="width:100%"
+                  />
+                </a-form-item>
+                {state.formModel.propertyType === "property" && (
+                  <div>
+                    <a-form-item label="是否只读" name="readonly">
+                      <a-radio-group
+                        v-model={[state.formModel.readonly, "value"]}
+                      >
+                        <a-radio value={true}>只读</a-radio>
+                        <a-radio value={false}>可编辑</a-radio>
+                      </a-radio-group>
+                    </a-form-item>
+                    <a-form-item label="是否必填" name="required">
+                      <a-radio-group
+                        v-model={[state.formModel.required, "value"]}
+                      >
+                        <a-radio value={true}>必填</a-radio>
+                        <a-radio value={false}>非必填</a-radio>
+                      </a-radio-group>
+                    </a-form-item>
+                    <a-form-item label="属性在PC端是否可查询" name="">
+                      <a-switch
+                        v-model={[state.formModel.queryDisplay, "checked"]}
+                      ></a-switch>
+                    </a-form-item>
+                    <a-form-item label="属性是否在列表显示" name="listDisplay">
+                      <a-switch
+                        v-model={[state.formModel.listDisplay, "checked"]}
+                      ></a-switch>
+                    </a-form-item>
+                  </div>
+                )}
+                <a-form-item label="显示排序" name="sort">
+                  <a-input-number
+                    min={0}
+                    v-model={[state.formModel.sort, "value"]}
+                    style="width:100%"
+                  />
+                </a-form-item>
+                <a-form-item label="属性是否为超级链接" name="canLink">
+                  <a-space>
+                    <a-switch
+                      v-model={[state.formModel.canLink, "checked"]}
+                    ></a-switch>
+                    {state.formModel.canLink && (
+                      <a-input v-model={[state.formModel.linkUrl, "value"]} />
+                    )}
+                  </a-space>
+                </a-form-item>
+                <a-form-item label="备注" name="remark">
+                  <a-textarea v-model={[state.formModel.remark, "value"]} />
+                </a-form-item>
+              </a-form>
+            )}
+          </div>
+        </a-modal>
+      </div>
+    );
+  },
+});