safajscomponent

Safa javascript component's Design by MehrdadM

کامپوننت های صفا رایانه

Demo

You can see a demo and examples in this page: Demo & examples

Instalation

$ npm install safajscomponent

How to use

Add code to main.js
import SJC from 'safajscomponent/src'
Vue.use(SJC)

فرم پایه
BaseForm :

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | nidForm | GUID | not set | کد فرم | | title | String | not set | عنوان فرم |

تاریخ
ClsDate :

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | notitle | Boolean | false | نمایش / عدم نمایش عنوان تاریخ| | placeholder | String | not set | عنوان داخل تاریخ|

Events

| event | description | |-------|-------------| | selectionChanged | انتخاب تاریخ |

تکس باکس
ClsTextbox :

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | rules | String | | اعتبار سنجی| | mask | String | | برای فرمت ورودی|

Events

| event | description | |-------|-------------|

دکمه
ClsButton :

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------|

Events

| event | description | |-------|-------------|

تیک
ClsCheckbox :

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------|

Events

| event | description | |-------|-------------|

کمبو
ClsCombo :

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | showTextbox | Boolean | | نمایش/عدم نمایش تکس باکس| | DomainName | String | |دامنه| | DtoName | String | | نام جدول|

Events

| event | description | |-------|-------------| | selectionChanged | انتخاب |

توضیحات
ClsComment :

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | rows | Number | |تعداد سطر| | cols | Number | | تعداد ستون|

Events

| event | description |

گرید
ClsGrid :

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | data | Array | null |دیتا مورد نظر| | height | Number | not set |طول گرید| | pageSize | Number | 20 | تعداد سطر در صفحه| | scrollable | Boolean | true | اسکرول شود / خیر| | reorderable | Boolean | true | جابجایی ستون ها| | sortable | Boolean | true | قابلیت سورت بر روی ستون ها| | filterable | Boolean | true | قابلیت فیلتر کردن| | resizable | Boolean | true | تغییر اندازه ستون ها| | groupable | Boolean | false | گروه بندی ستون ها| | pageable | Boolean | false | نمایش پیجینگ| | autoSync | Boolean | false | ست کردن دیتا بصورت async|

Events

| event | description | |-------|-------------| | selectionChanged | انتخاب سطر | | dataBound | لود ستون ها | | dataBinding | درحال لود ستون ها | | sort | سورت کردن | | filter | فیلتر کردن | | group | گروه بندی کردن | | page | انتخاب صفحه | | groupExpand | بازکزدن گروه | | groupCollapse | بستن گروه |

گرید سکوریتی
ClsSecurityGrid :

Properties

| Property | Type | Default | Description | |----------|------|---------|-------------| | securityId | GUID | not set | کد سکوریتی|

Events

| event | description | |----------|------|---------|-------------|

نحوه استفاده You may use these components in your project

<BaseForm ref="نم فرم برای دسترسی در سطح برنامه"  nidForm='کد فرم که باید "جی آی دی " باشد'>
  <header>
    <h3>عنوان فرم ...</h3>
  </header>

  در صورت استفاده از این کنترل
  <ClsSecurityGrid securityId="GUID" label="عنوان">

    <ClsCheckbox :rules="[v => !!v || 'باید تیک بزنید']" required label="جنسیت - مرد/زن" id="chMale" :disabled="disabled" v-model="IsMale" />

    <ClsCombo :rules="[v => !!v || 'لطفا یک گزینه را انتخاب کنید']" required :disabled="disabled" :selectionChanged="onChange" DomainName="دامنه" DtoName="اسم جدول" v-model="فیلد برای بایندیگ" />

    <ClsComment securityId="GUID" label="گرید نوسازی" rows="5" :disabled="disabled" v-model="فیلد برای بایندینگ" />

    <ClsDate :disabled="disabled" v-model="فیلد برای بایندینگ" />

    <ClsTextbox :rules="[v => !!v || 'نام را وارد نمایید']" required label="عنوان" :disabled="disabled" maxlength="10" type="string" v-model="فیلد برای بایندینگ" />

    <ClsTextbox label="سن" :disabled="disabled" mask="###" type="number" v-model="Age" />

  </ClsSecurityGrid>

  <ClsGrid securityId="GUID"  label="عنوان" :disabled="disabled" ref="grid" :sort="sort" :selectionChanged="grid_selectionChanged" :data="فیدل برای بایندینگ">
    <ClsGridColumn selectable="true" width="40px"></ClsGridColumn>
    <ClsGridColumn securityId="GUID" field="نام فیلد"  label="عنوان"></ClsGridColumn>
    <ClsGridColumn width="200px" field="نام فیلد"  label="عنوان" template="<div  style='background-color: skyblue;'>تست #: Name #</div>"></ClsGridColumn>
    <ClsGridColumn width="200px"  controlType="date" field="StartDate" label="تاریخ شروع"></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان" type="number" ></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان"  format="{0:n0}" type="number" ></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان"  type="boolean"></ClsGridColumn>
    <ClsGridColumn field="نام فیلد"  label="عنوان" width="200px" controlType="Combo" DomainName="نام دامنه" DtoName="نام جدول"></ClsGridColumn>
  </ClsGrid>

  <footer>
    <ClsButton securityId="GUID" label="عنوان" v-on:click="Edit" />
    <ClsButton v-on:click="Save">عنوان</ClsButton>
  </footer>
</BaseForm>

export default {

  data: () => ({
    selecteditems: null,
    Name: 'شایان',
    Family: 'خوش آئین',
    Age: 32,
    disabled: true,
    IsMale: true,
    Comment: "پسر خوب",
    CI_...: null,
    BirthDate: "1300/01/01",
    gridData: [{
      Name: 'علی',
      Family: 'رضایی',
      UnitPrice: 2500,
      UnitsInStock: 1500,
      Discontinued: false,
      CI_SideCode: 4,
      StartDate: '1300/10/10'
    }]
  }),
  methods: {
    Edit(event) {
      .
      .
      .
      this.disabled = false;
    },
    Save(event) {
      this.$refs.frmRequest.validation();
    },
    Cancel(event) {
      .
      .
      .
      this.disabled = true;
    },
    onChange(item) {
      .
      .
      .
    },
    grid_selectionChanged(a) {
      this.selecteditems = a;
    },
    sort(a) {
      .
      .
      .
    }
  }
}